/* ==========================================================================
   TUTAP.VN - BẢN SẮC TÂM LINH PHẬT GIÁO & TÍN NGƯỠNG THỜ MẪU VIỆT NAM
   Giao diện Native App Chuẩn iOS: Ban Ngày (Light) & Ban Đêm (Dark)
   Theo nguyên mẫu thiết kế Chánh Tâm - Trang Nghiêm, Linh Thiêng, Đẳng Cấp
   ========================================================================== */

/* Giữ nguyên menu top chuẩn của Top.php */
.carousel-wrapper {
  display: none !important;
}

/* ==========================================================================
   1. BẢNG MÀU 2 CHẾ ĐỘ: BAN ĐÊM (DARK) & BAN NGÀY (LIGHT)
   ========================================================================== */
:root {
  /* Chế độ Ban Đêm (Tông Nâu Gỗ Sáng Trang Trọng Đền Chùa - Không Tối Đen) */
  --tt-bg: #261c16;
  /* Nâu gỗ trầm tự nhiên, ấm cúng */
  --tt-bg-shell: #2f221a;
  /* Nền shell nâu gỗ lim sang trọng, sáng rõ */
  --tt-card-bg: #3d2d23;
  /* Thẻ bài nâu gỗ đền chùa trang nghiêm */
  --tt-card-bg-subtle: #47352a;
  /* Nền khối phụ nâu gỗ sáng hài hòa */
  --tt-card-border: rgba(229, 195, 101, 0.28);
  --tt-card-border-active: #f0cf75;

  /* Màu Chữ Dark / Nâu Gỗ */
  --tt-text-title: #fff4dc;
  /* Chữ tiêu đề vàng ngà sáng rõ, thanh thoát */
  --tt-text-body: #ebd9c5;
  /* Chữ nội dung ngà ấm dịu mắt, dễ đọc */
  --tt-text-muted: #bda694;
  /* Chữ mờ tông nâu nhạt ấm */

  /* Màu Hoàng Kim & Sơn Son */
  --tt-gold: #f0cf75;
  --tt-gold-dark: #c99e32;
  --tt-gold-glow: rgba(240, 207, 117, 0.25);
  --tt-red-burgundy: #8a1c1c;
  --tt-red-gradient: linear-gradient(135deg, #a02222, #7a1515);
  --tt-khung-color: #ffd84d;
  /* Màu khung vàng ánh kim ban đêm / mặc định */

  /* Tabbar & Header Nâu Gỗ */
  --tt-header-bg: rgba(47, 34, 26, 0.96);
  --tt-tabbar-bg: rgba(47, 34, 26, 0.97);
  --tt-tabbar-border: rgba(229, 195, 101, 0.28);
  --tt-tabbar-inactive: #a89482;

  /* Phông chữ Native & Tiếng Việt trang nhã, mềm mại */
  --tt-font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Bo góc chuẩn iOS */
  --tt-radius-xl: 24px;
  --tt-radius-lg: 18px;
  --tt-radius-md: 14px;
  --tt-radius-sm: 10px;
  --tt-tab-height: 64px;
}

/* Chế độ Ban Ngày (Light Mode) theo ảnh 2 */
body.theme-light {
  --tt-bg: #cfc2ae;
  --tt-bg-shell: #ede6d8;
  --tt-card-bg: #ffffff;
  --tt-card-bg-subtle: #f7f3ec;
  --tt-card-border: #dfd4c0;
  --tt-card-border-active: #b48325;

  /* Màu Chữ Light */
  --tt-text-title: #362215;
  --tt-text-body: #543c2c;
  --tt-text-muted: #857060;

  /* Màu Hoàng Kim & Sơn Son */
  --tt-gold: #9e731b;
  --tt-gold-dark: #785309;
  --tt-gold-glow: rgba(180, 131, 37, 0.2);
  --tt-red-burgundy: #8f1b1b;
  --tt-red-gradient: linear-gradient(135deg, #b48325, #8c6815);
  --tt-khung-color: #2b231d;
  /* Màu khung ban ngày nâu đậm / đen cổ truyền */

  /* Tabbar & Header Light */
  --tt-header-bg: rgba(247, 243, 235, 0.95);
  --tt-tabbar-bg: rgba(255, 255, 255, 0.96);
  --tt-tabbar-border: #e2d7c5;
  --tt-tabbar-inactive: #8f7d6e;
}

/* ==========================================================================
   2. NỀN TOÀN CỤC, TYPOGRAPHY & KIỂM SOÁT THAO TÁC CHẠM CUỘN NATIVE
   ========================================================================== */
html {
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: var(--tt-bg) !important;
  color: var(--tt-text-body) !important;
  font-family: var(--tt-font-family) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin: 0;
  padding: 0;
  padding-bottom: calc(var(--tt-tab-height) + env(safe-area-inset-bottom, 20px) + 24px) !important;
  touch-action: manipulation;
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Áp dụng phông chữ trang nhã, sắc nét cho toàn bộ các tiêu đề, thẻ bài và chữ trên hệ thống */
h1,
h2,
h3,
h4,
h5,
h6,
.brand-title,
.hero-sanctuary-title,
.hero-sanctuary-desc,
.mother-goddess-title,
.mother-goddess-desc,
.section-title,
.header-title,
.kinhsach-title,
.kinhsach-name,
.tab-hero-title,
.tab-hero-subtitle,
.action-circle-title,
.native-tab-label,
.native-card,
.sp-action-btn,
.slider-toggle-bar-btn {
  font-family: var(--tt-font-family) !important;
}

/* Khống chế thao tác chạm và cuộn (Overscroll & Text Selection chuẩn Native App) */
.native-bottom-tabbar,
.native-tab-item,
.hero-pill-btn,
.practice-action-item,
.slider-dot,
.slider-dots,
.action-circle-item,
.sp-action-btn,
.slider-toggle-bar-btn,
.dharma-share-btn,
.native-card-header,
.tab-hero-header,
.btn,
button,
a.hero-pill-btn,
a.practice-action-item {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation;
}

/* Đảm bảo vùng văn bản đọc có thể chọn và sao chép dễ dàng */
.daily-dharma-card,
.tab-article-item,
.kinhsach-item,
.selectable-text,
.read-content,
article,
p {
  user-select: text;
  -webkit-user-select: text;
}

/* Khung bọc ứng dụng (iOS Native Shell) */
.native-app-container {
  max-width: 480px;
  margin: 0 auto;
  background-color: var(--tt-bg-shell);
  min-height: 100vh;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow-x: hidden;
  box-sizing: border-box;
  padding-bottom: 20px;
  transition: background-color 0.3s ease;
}

@media (min-width: 768px) {
  .native-app-container {
    max-width: 680px;
    border-left: 1px solid var(--tt-card-border);
    border-right: 1px solid var(--tt-card-border);
  }

  .native-tabbar-container {
    max-width: 680px;
  }
}

@media (min-width: 1024px) {
  .native-app-container {
    max-width: 860px;
  }

  .native-tabbar-container {
    max-width: 860px;
  }
}

/* ==========================================================================
   3. TOP NATIVE HEADER BAR (CHÁNH TÂM - TUTAP.VN)
   ========================================================================== */
.chánh-tam-topbar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--tt-header-bg);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-bottom: 1px solid var(--tt-card-border);
  padding: max(8px, env(safe-area-inset-top, 8px)) 16px 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease;
}

.chánh-tam-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-icon-btn {
  background: transparent;
  border: none;
  color: var(--tt-gold);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, background-color 0.2s ease;
}

.topbar-icon-btn:active {
  transform: scale(0.92);
  background: rgba(212, 175, 55, 0.12);
}

.chánh-tam-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  text-align: center;
}

.brand-lotus-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.brand-lotus-icon {
  width: 22px;
  height: 22px;
  color: var(--tt-gold);
}

.brand-title {
  font-family: var(--tt-font-family);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--tt-gold);
  line-height: 1.1;
  text-shadow: 0 1px 4px var(--tt-gold-glow);
}

.brand-subtitle {
  font-size: 10.5px;
  color: var(--tt-text-muted);
  letter-spacing: 0.3px;
  margin-top: 2px;
  font-weight: 500;
}

.chánh-tam-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Nút đổi Theme Ngày/Đêm */
.theme-toggle-btn {
  background: rgba(229, 195, 101, 0.12);
  border: 1px solid var(--tt-card-border);
  color: var(--tt-gold);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.theme-toggle-btn:hover {
  background: rgba(229, 195, 101, 0.22);
}

/* Nút Chuông có chấm đỏ */
.bell-notify-wrap {
  position: relative;
  display: inline-flex;
}

.bell-badge-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  background-color: #ef4444;
  border-radius: 50%;
  border: 1.5px solid var(--tt-bg-shell);
}

/* ==========================================================================
   4. HERO BANNER: "AN YÊN TỪ BÊN TRONG" & ĐỨC PHẬT DÁT VÀNG
   ========================================================================== */
.hero-sanctuary-card {
  margin: 14px 16px;
  border-radius: var(--tt-radius-xl);
  overflow: hidden;
  position: relative;
  min-height: clamp(280px, 34vw, 420px);
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-color: #2f221a;
  border: 1px solid var(--tt-card-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 20px;
  box-sizing: border-box;
}

body.theme-light .hero-sanctuary-card {
  background-color: #f7f3eb;
}

/* Lớp phủ chuyển màu nâu gỗ đền chùa bên trái để chữ cực kỳ nổi bật, hòa quyện mượt mà vào ảnh */
.hero-sanctuary-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(47, 34, 26, 0.96) 0%,
      rgba(47, 34, 26, 0.85) 45%,
      rgba(47, 34, 26, 0.25) 78%,
      rgba(47, 34, 26, 0.0) 100%);
  pointer-events: none;
  z-index: 1;
}

body.theme-light .hero-sanctuary-card::before {
  background: linear-gradient(90deg,
      rgba(247, 243, 235, 0.97) 0%,
      rgba(247, 243, 235, 0.88) 45%,
      rgba(247, 243, 235, 0.25) 78%,
      rgba(247, 243, 235, 0.0) 100%);
}

.hero-sanctuary-content {
  position: relative;
  z-index: 2;
  max-width: 62%;
}

/* TỐI ƯU CHUYÊN NGHIỆP TRÊN MÀN HÌNH MỞ RỘNG (Tablet, Laptop, Desktop):
   - Phóng to toàn cảnh (cover) để độ rộng ảnh lấp đầy tự nhiên, không bị hẹp hay hụt ảnh
   - Giữ nguyên 100% phần đầu và toàn thân tượng Phật không bị cắt xén nhờ neo đỉnh (center top)
   - Chiều cao dãn nở linh hoạt theo tỷ lệ màn hình (clamp)
   - Phần chữ bên trái rộng rãi, chuẩn bố cục tạp chí tâm linh cao cấp */
@media (min-width: 768px) {
  .hero-sanctuary-card {
    min-height: clamp(340px, 32vw, 460px);
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    padding: 32px 28px;
  }

  .hero-sanctuary-content {
    max-width: 54%;
  }
}

@media (min-width: 1024px) {
  .hero-sanctuary-card {
    min-height: clamp(380px, 30vw, 500px);
    background-size: cover !important;
    background-position: center top !important;
    padding: 36px 32px;
  }

  .hero-sanctuary-content {
    max-width: 50%;
  }
}

.hero-sanctuary-title {
  font-family: var(--tt-font-family);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--tt-text-title);
  margin: 0 0 8px 0;
  letter-spacing: 0.5px;
}

.hero-sanctuary-desc {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--tt-text-body);
  margin: 0 0 16px 0;
  font-weight: 500;
}

.hero-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--tt-red-gradient);
  color: #ffffff;
  border: 1px solid rgba(229, 195, 101, 0.4);
  border-radius: 25px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(122, 21, 21, 0.4);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.hero-pill-btn:active {
  transform: scale(0.95);
}

/* Chấm chuyển Slide */
.hero-slider-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 3;
}

.slider-dot {
  width: 18px;
  height: 4px;
  border-radius: 3px;
  background: rgba(229, 195, 101, 0.3);
  transition: all 0.3s ease;
}

.slider-dot.active {
  background: var(--tt-gold);
  width: 28px;
}


/* ==========================================================================
   5. BỐN LỐI TẮT THỜI KHÓA TU HỌC & 5 NÚT TRÒN HOÀNG KIM
   ========================================================================== */
.four-practice-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 8px 12px 14px 12px;
}

.practice-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: var(--tt-card-bg-subtle);
  border: 1px solid var(--tt-card-border);
  border-radius: var(--tt-radius-md);
  padding: 10px 4px 8px 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.practice-action-item:active {
  transform: scale(0.94);
  border-color: var(--tt-gold);
}

.practice-action-btn {
  font-size: 24px;
  line-height: 1;
  margin-bottom: 5px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.practice-action-title {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--tt-text-title);
  line-height: 1.2;
  white-space: nowrap;
}

.practice-action-desc {
  font-size: 9.5px;
  color: var(--tt-text-muted);
  margin-top: 2px;
  white-space: nowrap;
}

/* Thẻ Lời Phật Dạy Hôm Nay (Daily Dharma) */
.daily-dharma-card {
  background: radial-gradient(ellipse at top right, rgba(240, 207, 117, 0.12) 0%, var(--tt-card-bg) 75%) !important;
  border: 1px solid rgba(240, 207, 117, 0.35) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}

.dharma-share-btn:hover {
  color: var(--tt-gold) !important;
}

/* 5 Nút Tròn Cũ Dự Phòng */
.five-actions-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 6px 14px 18px 14px;
}

.action-circle-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  transition: transform 0.2s ease;
}

.action-circle-item:active {
  transform: scale(0.93);
}

.action-circle-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--tt-card-bg-subtle) 0%, var(--tt-card-bg) 100%);
  border: 1.5px solid var(--tt-card-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--tt-gold);
  margin-bottom: 7px;
  position: relative;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.action-circle-btn svg {
  width: 24px;
  height: 24px;
  color: var(--tt-gold);
}

.action-circle-item:hover .action-circle-btn {
  border-color: var(--tt-gold);
  box-shadow: 0 0 16px var(--tt-gold-glow);
}

.action-circle-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--tt-text-title);
  line-height: 1.2;
}

.action-circle-desc {
  font-size: 9.5px;
  color: var(--tt-text-muted);
  line-height: 1.2;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   6. SECTION: PHÁP ÂM NỔI BẬT (AUDIO PLAYER CARD)
   ========================================================================== */
.section-container {
  padding: 0 16px;
  margin-bottom: 20px;
}

.section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.section-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--tt-text-title);
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--tt-font-family);
}

.section-link-more {
  font-size: 12px;
  font-weight: 600;
  color: var(--tt-gold);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 2px;
}

.audio-track-card {
  background: var(--tt-card-bg);
  border: 1px solid var(--tt-card-border);
  border-radius: var(--tt-radius-lg);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.audio-track-card:active {
  transform: scale(0.99);
}

.audio-thumb-wrap {
  width: 70px;
  height: 70px;
  border-radius: var(--tt-radius-md);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  border: 1px solid var(--tt-card-border);
}

.audio-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.audio-play-badge {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 20px;
}

.audio-info-col {
  flex: 1;
  min-width: 0;
}

.audio-track-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--tt-text-title);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audio-track-author {
  font-size: 11.5px;
  color: var(--tt-text-muted);
  margin-bottom: 8px;
}

.audio-waveform-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.audio-time-label {
  font-size: 10.5px;
  color: var(--tt-text-muted);
  font-weight: 600;
  font-feature-settings: "tnum";
}

.audio-bar-track {
  flex: 1;
  height: 4px;
  background: rgba(229, 195, 101, 0.2);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.audio-bar-fill {
  height: 100%;
  width: 45%;
  background: var(--tt-gold);
  border-radius: 2px;
}

.audio-arrow-right {
  color: var(--tt-text-muted);
  font-size: 16px;
  flex-shrink: 0;
}

/* ==========================================================================
   7. BANNER THỜ MẪU – TÍN NGƯỠNG VIỆT NAM
   ========================================================================== */
.banner-mother-goddess {
  margin: 0 16px 20px 16px;
  border-radius: var(--tt-radius-xl);
  overflow: hidden;
  position: relative;
  min-height: 145px;
  background-size: cover;
  background-position: center right;
  border: 1px solid var(--tt-card-border);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 20px;
  box-sizing: border-box;
}

.banner-mother-goddess::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(47, 34, 26, 0.94) 0%,
      rgba(47, 34, 26, 0.84) 55%,
      rgba(47, 34, 26, 0.25) 90%);
  pointer-events: none;
  z-index: 1;
}

body.theme-light .banner-mother-goddess::before {
  background: linear-gradient(90deg,
      rgba(247, 243, 235, 0.96) 0%,
      rgba(247, 243, 235, 0.88) 55%,
      rgba(247, 243, 235, 0.2) 90%);
}

.mother-goddess-content {
  position: relative;
  z-index: 2;
  max-width: 65%;
}

.mother-goddess-title {
  font-family: var(--tt-font-family);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--tt-gold);
  letter-spacing: 0.6px;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.mother-goddess-desc {
  font-size: 11px;
  color: var(--tt-text-body);
  line-height: 1.35;
  margin-bottom: 12px;
}

.mother-goddess-btn {
  display: inline-block;
  background: linear-gradient(135deg, #b48325, #8c6815);
  color: #ffffff;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   8. GRID NỘI DUNG NỔI BẬT (4 CARDS)
   ========================================================================== */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.featured-card {
  position: relative;
  border-radius: var(--tt-radius-md);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--tt-card-border);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  display: flex;
  align-items: flex-end;
  padding: 8px 6px;
  box-sizing: border-box;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.featured-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.85) 100%);
  pointer-events: none;
}

.featured-card:active {
  transform: scale(0.96);
  border-color: var(--tt-gold);
}

.featured-card-title {
  position: relative;
  z-index: 1;
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  text-align: center;
  width: 100%;
}

/* ==========================================================================
   9. LỊCH VẠN NIÊN WIDGET THU GỌN LIỀN MẠCH
   ========================================================================== */
.mini-calendar-strip {
  margin: 0 16px 18px 16px;
  background: var(--tt-card-bg);
  border: 1px solid var(--tt-card-border);
  border-radius: var(--tt-radius-md);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.calendar-strip-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.calendar-strip-badge {
  background: rgba(229, 195, 101, 0.15);
  color: var(--tt-gold);
  border: 1px solid var(--tt-card-border);
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
}

.calendar-strip-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--tt-text-title);
}

.calendar-strip-event {
  font-size: 11px;
  color: var(--tt-gold);
  font-weight: 700;
}

/* ==========================================================================
   10. BOTTOM NATIVE TAB BAR (5 MỤC ĐÃ ĐƯỢC USER DUYỆT)
   ========================================================================== */
.native-bottom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--tt-tabbar-bg);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-top: 1px solid var(--tt-tabbar-border);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom, 12px);
}

.native-tabbar-container {
  width: 100%;
  max-width: 480px;
  height: var(--tt-tab-height);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 4px;
  box-sizing: border-box;
}

.native-tab-btn {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  color: var(--tt-tabbar-inactive);
  cursor: pointer;
  padding: 6px 0;
  position: relative;
  transition: all 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
}

.native-tab-icon {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 4px;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.native-tab-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: color 0.2s ease;
}

.native-tab-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--tt-gold);
  position: absolute;
  bottom: 4px;
  opacity: 0;
  transform: scale(0);
  transition: all 0.2s ease;
}

.native-tab-btn.active {
  color: var(--tt-gold);
}

.native-tab-btn.active .native-tab-icon {
  transform: translateY(-2px) scale(1.1);
  color: var(--tt-gold);
}

.native-tab-btn.active .native-tab-dot {
  opacity: 1;
  transform: scale(1);
}

/* ==========================================================================
   11. NATIVE TAB VIEWS (CHUYỂN ĐỔI GIỮA 5 TABS)
   ========================================================================== */
.native-tab-view {
  display: none;
  animation: fadeInTab 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.native-tab-view.active {
  display: block;
}

@keyframes fadeInTab {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tab Banner Title chung */
.tab-hero-header {
  padding: 16px 16px 12px 16px;
  background: var(--tt-card-bg-subtle);
  border-bottom: 1px solid var(--tt-card-border);
  margin-bottom: 14px;
}

.tab-hero-title {
  font-family: var(--tt-font-family);
  font-size: 18px;
  font-weight: 800;
  color: var(--tt-gold);
  margin: 0 0 4px 0;
}

.tab-hero-subtitle {
  font-size: 12px;
  color: var(--tt-text-muted);
  line-height: 1.4;
  margin: 0;
}

/* Thẻ chung trong Tab */
.native-card {
  background: var(--tt-card-bg);
  border: none !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  overflow: visible !important;
  padding: 14px 16px;
  margin: 0 16px 14px 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.native-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.native-card-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--tt-text-title);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   12. CHUỖI TRÀNG HẠT BỒ ĐỀ 108 HẠT TRỰC TUYẾN (TAB PHẬT GIÁO)
   ========================================================================== */
.rosary-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background: var(--tt-card-bg-subtle);
  border: 1px solid var(--tt-card-border);
  border-radius: var(--tt-radius-lg);
  margin: 0 16px 14px 16px;
  text-align: center;
}

.rosary-counter-big {
  font-size: 42px;
  font-weight: 900;
  color: var(--tt-gold);
  font-feature-settings: "tnum";
  line-height: 1;
  margin: 6px 0;
}

.rosary-bead-visual {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #93562a, #4a2811 75%);
  border: 3px solid var(--tt-gold);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.3);
  margin: 12px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fde68a;
  font-size: 26px;
  user-select: none;
  transition: transform 0.1s ease;
}

.rosary-bead-visual:active {
  transform: scale(0.92);
}

.rosary-mantra-text {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tt-text-title);
  margin-top: 4px;
}

/* ==========================================================================
   13. POPUP MODAL LỄ PHẬT & THỈNH CHUÔNG (TĨNH TÂM)
   ========================================================================== */
.sacred-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  animation: fadeInBackdrop 0.2s ease;
}

.sacred-modal-box {
  background: var(--tt-bg-shell);
  border: 2px solid var(--tt-gold);
  border-radius: var(--tt-radius-xl);
  max-width: 560px;
  width: 95vw;
  max-height: 92vh;
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.8), 0 0 30px var(--tt-gold-glow);
  animation: scaleUpModal 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
}

/* Khung hiển thị ảnh ban thờ rõ nét, kích thước chuẩn, tự động co giãn */
.altar-image-stage {
  position: relative;
  width: 100%;
  max-height: 48vh;
  min-height: 180px;
  background: radial-gradient(circle at center, rgba(61, 45, 35, 0.92) 0%, rgba(26, 18, 14, 0.98) 100%);
  border: 1.5px solid rgba(240, 207, 117, 0.45);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7), 0 6px 20px rgba(0, 0, 0, 0.35);
  margin-bottom: 12px;
}

.altar-image-stage img {
  max-width: 100%;
  max-height: 48vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.65));
  image-rendering: -webkit-optimize-contrast;
  transition: transform 0.3s ease;
}

/* Hiệu ứng khói hương uốn lượn linh thiêng */
@keyframes incenseSmokeRise {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 0.85;
  }

  50% {
    transform: translateY(-8px) scale(1.15) rotate(3deg);
    opacity: 1;
    filter: drop-shadow(0 0 16px rgba(240, 207, 117, 0.9)) drop-shadow(0 -6px 12px rgba(239, 68, 68, 0.6));
  }

  100% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 0.85;
  }
}

.incense-active-glow {
  display: inline-block;
  animation: incenseSmokeRise 2.5s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(240, 207, 117, 0.85));
}

@keyframes fadeInBackdrop {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes scaleUpModal {
  from {
    transform: scale(0.9);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* ==========================================================================
   14. PHONG CÁCH CHÁNH TÂM CHO CÁC MODULE MỞ RỘNG (SLIDER, SẮM LỄ, GHI CHÚ)
   ========================================================================== */
.chánh-tam-expand-card {
  background: var(--tt-card-bg);
  border: 1px solid var(--tt-card-border);
  border-radius: var(--tt-radius-lg);
  padding: 14px 16px;
  margin: 0 16px 14px 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: all 0.25s ease;
}

.chánh-tam-subcard {
  background: var(--tt-card-bg-subtle);
  border: 1px solid var(--tt-card-border);
  border-radius: var(--tt-radius-md);
  padding: 12px 14px;
  margin-bottom: 10px;
}

/* Bảng chip chọn nhanh đồ sắm lễ */
.samle-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.samle-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--tt-card-bg-subtle);
  border: 1px solid var(--tt-card-border);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11.5px;
  color: var(--tt-text-body);
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

.samle-chip:hover {
  border-color: var(--tt-gold);
  color: var(--tt-gold);
}

.samle-chip input[type="checkbox"] {
  accent-color: var(--tt-gold);
  cursor: pointer;
}

/* Accordion 10 ban thờ */
.ban-accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--tt-card-bg-subtle);
  border: 1px solid var(--tt-card-border);
  border-radius: var(--tt-radius-sm);
  padding: 9px 12px;
  margin-bottom: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--tt-text-title);
  transition: all 0.2s ease;
}

.ban-accordion-header:hover {
  border-color: var(--tt-gold);
}

.ban-accordion-content {
  background: var(--tt-card-bg);
  border: 1px dashed var(--tt-card-border);
  border-radius: var(--tt-radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--tt-text-body);
}

/* Form ghi chú */
.sp-textarea {
  width: 100%;
  border-radius: var(--tt-radius-md);
  background: var(--tt-card-bg-subtle);
  color: var(--tt-text-body);
  border: 1px solid var(--tt-card-border);
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease;
}

.sp-textarea:focus {
  border-color: var(--tt-gold);
}

.sp-action-btn {
  background: var(--tt-red-gradient);
  color: #ffffff;
  border: none;
  padding: 8px 18px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(143, 27, 27, 0.35);
  transition: transform 0.15s ease, opacity 0.2s ease;
}

.sp-action-btn:active {
  transform: scale(0.98);
}

/* Search input */
.sp-search-box {
  width: 100%;
  padding: 9px 14px;
  border-radius: var(--tt-radius-md);
  border: 1px solid var(--tt-card-border);
  background: var(--tt-card-bg-subtle);
  color: var(--tt-text-title);
  font-size: 13px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease;
}

.sp-search-box:focus {
  border-color: var(--tt-gold);
}

/* Modal văn khấn */
#vk-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 100001;
  justify-content: center;
  align-items: center;
  padding: 16px;
  box-sizing: border-box;
}

#vk-modal>div {
  background: var(--tt-bg-shell);
  border: 1.5px solid var(--tt-gold);
  border-radius: var(--tt-radius-xl);
  max-width: 680px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   THEME TOGGLE BUTTON & TOPBAR THEME SUPPORT
   ========================================================================== */
#theme-toggle-top-btn {
  background: rgba(212, 175, 55, 0.18) !important;
  border: 1px solid #d4af37 !important;
  color: #e5c365 !important;
}

body.theme-light #theme-toggle-top-btn {
  background: #f7f3ec !important;
  border: 1px solid #b48325 !important;
  color: #9e731b !important;
}

body:not(.theme-light) #navbar.glass-nav {
  background: rgba(47, 34, 26, 0.96) !important;
  border-color: rgba(229, 195, 101, 0.28) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

body:not(.theme-light) #navbar.glass-nav .nav-link,
body:not(.theme-light) #navbar.glass-nav a,
body:not(.theme-light) #navbar.glass-nav span {
  color: var(--tt-text-title) !important;
}

body.theme-light #navbar.glass-nav {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(212, 197, 169, 0.6) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   YÊU CẦU 2: GIAO DIỆN SỰ KIỆN LỄ 1 THÁNG (HỖ TRỢ 2 GIAO DIỆN SÁNG & TỐI)
   ========================================================================== */
.glass-slider-container {
  margin: 12px 0 !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.glass-slider-card {
  background: var(--tt-card-bg) !important;
  border: 1px solid var(--tt-card-border) !important;
  border-radius: var(--tt-radius-lg) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3) !important;
  padding: 12px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

body.theme-light .glass-slider-card {
  background: #ffffff !important;
  border-color: #dfd4c0 !important;
  box-shadow: 0 6px 20px rgba(100, 80, 50, 0.1) !important;
}

.slider-header {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 10px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--tt-card-border) !important;
}

.glass-slider-card .header-title {
  color: var(--tt-gold) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  margin: 0 !important;
  letter-spacing: 0.3px !important;
}

.slider-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
}

.slider-container {
  flex: 1 !important;
  overflow: hidden !important;
  border-radius: var(--tt-radius-md) !important;
  background: rgba(30, 20, 14, 0.6) !important;
  border: 1px solid rgba(229, 195, 101, 0.22) !important;
  position: relative !important;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

body.theme-light .slider-container,
html.theme-light .slider-container {
  background: #fffcf7 !important;
  border-color: #dfd4c0 !important;
  box-shadow: inset 0 1px 4px rgba(120, 90, 50, 0.05) !important;
}

.slider-track {
  display: flex !important;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  will-change: transform !important;
}

.slide-item {
  min-width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 24px !important;
}

.slide-content {
  padding: 6px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--tt-text-body) !important;
}

body.theme-light .slide-content,
html.theme-light .slide-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #3d2c1e !important;
}

.date-inline {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
  padding-bottom: 5px !important;
  border-bottom: 1px solid rgba(229, 195, 101, 0.2) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
}

body.theme-light .date-inline,
html.theme-light .date-inline {
  border-bottom: 1px solid #dfd4c0 !important;
}

.date-item {
  background: transparent !important;
  padding: 0 !important;
}

.date-item:hover {
  background: transparent !important;
  transform: none !important;
}

.date-item.lunar {
  color: #ffd875 !important;
  font-weight: 700 !important;
}

body.theme-light .date-item.lunar,
html.theme-light .date-item.lunar {
  color: #8c5d12 !important;
}

.date-item.solar {
  color: #d1c0ae !important;
  font-weight: 600 !important;
}

body.theme-light .date-item.solar,
html.theme-light .date-item.solar {
  color: #6e5845 !important;
}

.date-separator {
  color: rgba(229, 195, 101, 0.4) !important;
  margin: 0 4px !important;
}

body.theme-light .date-separator,
html.theme-light .date-separator {
  color: #bfaea0 !important;
}

.slider-nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  background: rgba(35, 25, 18, 0.92) !important;
  border: 1px solid rgba(229, 195, 101, 0.35) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10 !important;
  color: #ffd875 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
  transition: all 0.2s ease !important;
}

.slider-nav svg {
  width: 18px !important;
  height: 18px !important;
}

body.theme-light .slider-nav,
html.theme-light .slider-nav {
  background: #ffffff !important;
  border-color: #dfd4c0 !important;
  color: #8c5d12 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

.slider-nav:hover {
  transform: translateY(-50%) scale(1.08) !important;
  border-color: var(--tt-gold) !important;
}

.slider-nav-prev {
  left: -12px !important;
}

.slider-nav-next {
  right: -12px !important;
}

/* KHUNG TỪNG SỰ KIỆN (.event-item) - CHUẨN MÀU THEO CHẾ ĐỘ NGÀY / ĐÊM */
.event-item,
.inner-slider-module .event-item,
.slider-container .event-item {
  background: rgba(46, 32, 24, 0.75) !important;
  border: 1px solid rgba(229, 195, 101, 0.22) !important;
  border-radius: 8px !important;
  padding: 7px 10px !important;
  margin-bottom: 6px !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.2s ease !important;
}

.event-item:hover,
.inner-slider-module .event-item:hover,
.slider-container .event-item:hover {
  background: rgba(60, 42, 32, 0.9) !important;
  border-color: rgba(229, 195, 101, 0.5) !important;
  transform: none !important;
}

body.theme-light .event-item,
html.theme-light .event-item,
body.theme-light .inner-slider-module .event-item,
html.theme-light .inner-slider-module .event-item,
body.theme-light .slider-container .event-item,
html.theme-light .slider-container .event-item {
  background: #ffffff !important;
  border: 1px solid #dfd4c0 !important;
  box-shadow: 0 1px 4px rgba(140, 100, 60, 0.08) !important;
}

body.theme-light .event-item:hover,
html.theme-light .event-item:hover,
body.theme-light .inner-slider-module .event-item:hover,
html.theme-light .inner-slider-module .event-item:hover,
body.theme-light .slider-container .event-item:hover,
html.theme-light .slider-container .event-item:hover {
  background: #fffdf9 !important;
  border-color: #b48325 !important;
}

/* NỘI DUNG VÀ CHỮ TRONG SỰ KIỆN (.day-events, .event-description) */
.day-events,
.event-description {
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: #f5ece1 !important;
}

.day-events *,
.event-description * {
  color: inherit !important;
  background: transparent !important;
}

.day-events b,
.day-events strong,
.event-description b,
.event-description strong {
  color: #ffd875 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

body.theme-light .day-events,
html.theme-light .day-events,
body.theme-light .event-description,
html.theme-light .event-description {
  color: #3c2a1e !important;
}

body.theme-light .day-events *,
html.theme-light .day-events *,
body.theme-light .event-description *,
html.theme-light .event-description * {
  color: inherit !important;
  background: transparent !important;
}

body.theme-light .day-events b,
html.theme-light .day-events b,
body.theme-light .day-events strong,
html.theme-light .day-events strong,
body.theme-light .event-description b,
html.theme-light .event-description b,
body.theme-light .event-description strong,
html.theme-light .event-description strong {
  color: #8c5d12 !important;
  font-size: 12px !important;
}

.day-toggle-button {
  background: rgba(229, 195, 101, 0.12) !important;
  border: 1px solid rgba(229, 195, 101, 0.3) !important;
  border-radius: 6px !important;
  color: #ffd875 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  margin-top: 6px !important;
  padding: 4px 10px !important;
  width: auto !important;
  transition: all 0.2s ease !important;
}

.day-toggle-button:hover {
  background: rgba(229, 195, 101, 0.22) !important;
  border-color: #ffd875 !important;
  color: #ffffff !important;
  transform: none !important;
}

body.theme-light .day-toggle-button,
html.theme-light .day-toggle-button {
  background: #f7efe1 !important;
  border: 1px solid #dfd4c0 !important;
  color: #8c5d12 !important;
}

body.theme-light .day-toggle-button:hover,
html.theme-light .day-toggle-button:hover {
  background: #ede1ce !important;
  border-color: #b48325 !important;
  color: #6a4305 !important;
}

/* Nút toggle mở / ẩn sự kiện 1 tháng */
.slider-toggle-bar-btn {
  width: 100% !important;
  padding: 8px 16px !important;
  background: rgba(212, 175, 55, 0.12) !important;
  border: 1px solid rgba(229, 195, 101, 0.28) !important;
  border-radius: var(--tt-radius-md) !important;
  color: #ffd875 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  margin-top: 10px !important;
}

.slider-toggle-bar-btn .glass-button-text {
  color: #ffd875 !important;
  font-weight: 700 !important;
}

.slider-toggle-bar-btn .glass-chevron-icon {
  color: #ffd875 !important;
  stroke: #ffd875 !important;
  transition: transform 0.3s ease !important;
}

/* Khi mở ("Ẩn Sự Kiện 1 Tháng Tới") - Ban đêm */
.slider-toggle-bar-btn.expanded {
  background: rgba(229, 195, 101, 0.18) !important;
  border-color: rgba(229, 195, 101, 0.45) !important;
  color: #ffe08a !important;
}

.slider-toggle-bar-btn.expanded .glass-button-text {
  color: #ffe08a !important;
}

.slider-toggle-bar-btn.expanded .glass-chevron-icon {
  transform: rotate(180deg) !important;
  color: #ffe08a !important;
  stroke: #ffe08a !important;
}

.slider-toggle-bar-btn:hover {
  background: rgba(212, 175, 55, 0.25) !important;
  border-color: var(--tt-gold) !important;
  color: #ffffff !important;
}

.slider-toggle-bar-btn:hover .glass-button-text {
  color: #ffffff !important;
}

.slider-toggle-bar-btn:hover .glass-chevron-icon {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

/* BAN NGÀY (Light Mode: "Xem Sự Kiện" và "Ẩn Sự Kiện 1 Tháng Tới") */
body.theme-light .slider-toggle-bar-btn,
html.theme-light .slider-toggle-bar-btn {
  background: #fbf7ee !important;
  border-color: #dfd4c0 !important;
  color: #8c5d12 !important;
}

body.theme-light .slider-toggle-bar-btn .glass-button-text,
html.theme-light .slider-toggle-bar-btn .glass-button-text {
  color: #8c5d12 !important;
}

body.theme-light .slider-toggle-bar-btn .glass-chevron-icon,
html.theme-light .slider-toggle-bar-btn .glass-chevron-icon {
  color: #8c5d12 !important;
  stroke: #8c5d12 !important;
}

/* Khi mở ("Ẩn Sự Kiện 1 Tháng Tới") - Ban ngày */
body.theme-light .slider-toggle-bar-btn.expanded,
html.theme-light .slider-toggle-bar-btn.expanded {
  background: #f4ecda !important;
  border-color: #b48325 !important;
  color: #6a4305 !important;
}

body.theme-light .slider-toggle-bar-btn.expanded .glass-button-text,
html.theme-light .slider-toggle-bar-btn.expanded .glass-button-text {
  color: #6a4305 !important;
}

body.theme-light .slider-toggle-bar-btn.expanded .glass-chevron-icon,
html.theme-light .slider-toggle-bar-btn.expanded .glass-chevron-icon {
  color: #6a4305 !important;
  stroke: #6a4305 !important;
}

body.theme-light .slider-toggle-bar-btn:hover,
html.theme-light .slider-toggle-bar-btn:hover {
  background: #ede2c8 !important;
  border-color: #9e731b !important;
  color: #4a2e00 !important;
}

body.theme-light .slider-toggle-bar-btn:hover .glass-button-text,
html.theme-light .slider-toggle-bar-btn:hover .glass-button-text {
  color: #4a2e00 !important;
}

body.theme-light .slider-toggle-bar-btn:hover .glass-chevron-icon,
html.theme-light .slider-toggle-bar-btn:hover .glass-chevron-icon {
  color: #4a2e00 !important;
  stroke: #4a2e00 !important;
}

/* Khối slider sự kiện khi nằm trực tiếp trong card */
.inner-slider-module {
  animation: slideDownFade 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.inner-slider-module .header-title {
  color: var(--tt-gold) !important;
}

body.theme-light .inner-slider-module .header-title {
  color: #9e731b !important;
}

/* Khối Sự Kiện Hôm Nay */
#today-content {
  color: var(--tt-text-body) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

#today-content * {
  color: inherit !important;
  font-size: 12px !important;
}

body.theme-light #today-content {
  color: #543c2c !important;
}

@keyframes slideDownFade {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   YÊU CẦU 3: KINH SÁCH - CHÚ (HỖ TRỢ 2 GIAO DIỆN SÁNG & TỐI)
   ========================================================================== */
.glass-kinhsach-container {
  margin: 14px 0 !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   KHUNG HOA VĂN CỔ TRUYỀN GIA PHẢ CHUẨN (ORIENTAL FRAME)
   - Sử dụng DUY NHẤT 1 file SVG: ../img/khung_hoavan_black.svg
   - Đổi màu sắc 100% bằng CSS (mask-border / -webkit-mask-box-image)
   - Tự động thích ứng màu: Vàng gold ban đêm (#ffd84d), Nâu đen ban ngày (#2b231d)
   - Kích thước góc hoa văn 20px x 20px đồng nhất tuyệt đối cho mọi kích thước khối
   - Áp dụng cho tất cả các khối nội dung trên index.php
   ========================================================================== */
.native-card,
.glass-kinhsach-card,
.audio-track-card,
.four-practice-grid,
.guide-section,
body:not(.theme-light) .native-card,
body:not(.theme-light) .glass-kinhsach-card,
body:not(.theme-light) .audio-track-card,
body:not(.theme-light) .four-practice-grid,
body:not(.theme-light) .guide-section {
  position: relative !important;
  background: var(--tt-card-bg) !important;
  border: none !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3) !important;
  box-sizing: border-box !important;
  min-height: 60px !important;
}

body.theme-light .native-card,
body.theme-light .glass-kinhsach-card,
body.theme-light .audio-track-card,
body.theme-light .four-practice-grid,
body.theme-light .guide-section,
html.theme-light .native-card,
html.theme-light .glass-kinhsach-card,
html.theme-light .audio-track-card,
html.theme-light .four-practice-grid,
html.theme-light .guide-section,
.theme-light .native-card,
.theme-light .glass-kinhsach-card,
.theme-light .audio-track-card,
.theme-light .four-practice-grid,
.theme-light .guide-section {
  background: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   KHUNG 8 KHỐI HOA VĂN CỔ TRUYỀN (MODULAR 8-PIECE ORIENTAL FRAME)
   1. bordertutap_*.svg: Khung họa tiết cổ chữ Vạn dành cho:
      - Khối "An yên từ bên trong" (.hero-sanctuary-card)
      - Khối ảnh ban thờ trong modal Thắp Hương (.altar-image-stage)
   2. bordertutap2_*.svg: Khung họa tiết Rồng Mây Cung Đình dành cho:
      - Tất cả các khối còn lại bên dưới (.four-practice-grid, .native-card, .glass-kinhsach-card...)
   ========================================================================== */
:root {
  --corner-size: 34px;
  /* Khung bordertutap_ (Khối Bàn thờ): Ánh Vàng Kim Hoàng Gia trang nghiêm */
  --tt-frame-filter: invert(84%) sepia(60%) saturate(1800%) hue-rotate(355deg) brightness(106%) contrast(105%) drop-shadow(0 0 1px rgba(255, 215, 0, 0.45));

  /* Khung bordertutap2_ (Các khối còn lại bên dưới): Màu dịu nhẹ, thanh nhã, không nổi bật quá */
  --tt-frame2-filter: invert(70%) sepia(30%) saturate(500%) hue-rotate(355deg) brightness(85%) opacity(0.75);
}

body.theme-light,
html.theme-light,
.theme-light {
  /* Khung bordertutap_ ban ngày: Nâu Cánh Gián Óng Cổ Điển Truyền Thống */
  --tt-frame-filter: invert(15%) sepia(95%) saturate(1600%) hue-rotate(325deg) brightness(72%) contrast(115%) drop-shadow(0 0.5px 0.5px rgba(70, 25, 10, 0.4));

  /* Khung bordertutap2_ ban ngày: Nâu trầm nhẹ nhàng, dịu mắt, không chói gắt */
  --tt-frame2-filter: invert(20%) sepia(40%) saturate(450%) hue-rotate(315deg) brightness(80%) opacity(0.38);
}

/* Mặc định: Khung bordertutap2_ ở tất cả các khối dùng màu dịu nhẹ, thanh nhã */
.frame-modular-layer {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 5 !important;
  filter: var(--tt-frame2-filter) !important;
}

/* Riêng Khối Bàn Thờ (bordertutap_): An yên từ bên trong & ảnh ban thờ modal giữ màu trang nghiêm */
.hero-sanctuary-card .frame-modular-layer,
.altar-image-stage .frame-modular-layer,
.frame-modular-layer-altar {
  z-index: 2 !important;
  filter: var(--tt-frame-filter) !important;
}

/* Khối Bàn thờ: bo tròn 30px, khung to hơn */
.hero-sanctuary-card,
.altar-image-stage {
  border-radius: 10px !important;
  -webkit-border-radius: 10px !important;
  overflow: hidden !important;
  border: none !important;
}

.sacred-modal-box {
  border-radius: 30px !important;
}

/* Khung khối Bàn thờ to hơn: 48px (so với 34px của các khối dưới) */
.hero-sanctuary-card .frame-modular-corner,
.altar-image-stage .frame-modular-corner {
  width: 48px !important;
  height: 48px !important;
}

.hero-sanctuary-card .frame-edge-top,
.altar-image-stage .frame-edge-top {
  left: 48px !important;
  right: 48px !important;
  height: 48px !important;
  background-size: 48px 48px !important;
}

.hero-sanctuary-card .frame-edge-bottom,
.altar-image-stage .frame-edge-bottom {
  left: 48px !important;
  right: 48px !important;
  height: 48px !important;
  background-size: 48px 48px !important;
}

.hero-sanctuary-card .frame-edge-left,
.altar-image-stage .frame-edge-left {
  top: 48px !important;
  bottom: 48px !important;
  width: 48px !important;
  background-size: 48px 48px !important;
}

.hero-sanctuary-card .frame-edge-right,
.altar-image-stage .frame-edge-right {
  top: 48px !important;
  bottom: 48px !important;
  width: 48px !important;
  background-size: 48px 48px !important;
}

.hero-sanctuary-content {
  position: relative !important;
  z-index: 3 !important;
}

/* 4 Góc cố định không méo tỷ lệ */
.frame-modular-corner {
  position: absolute !important;
  width: var(--corner-size, 34px) !important;
  height: var(--corner-size, 34px) !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* 4 Cạnh tự động lặp theo kích thước khối */
.frame-modular-edge {
  position: absolute !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* --------------------------------------------------------------------------
   MẶC ĐỊNH: Dùng bordertutap2_*.svg cho tất cả các khối bên dưới
   -------------------------------------------------------------------------- */
.frame-corner-tl {
  top: 0 !important;
  left: 0 !important;
  background-image: url('../img/bordertutap2_1.svg') !important;
}

.frame-corner-tr {
  top: 0 !important;
  right: 0 !important;
  background-image: url('../img/bordertutap2_3.svg') !important;
}

.frame-corner-bl {
  bottom: 0 !important;
  left: 0 !important;
  background-image: url('../img/bordertutap2_7.svg') !important;
}

.frame-corner-br {
  bottom: 0 !important;
  right: 0 !important;
  background-image: url('../img/bordertutap2_9.svg') !important;
}

.frame-edge-top {
  top: 0 !important;
  left: var(--corner-size, 34px) !important;
  right: var(--corner-size, 34px) !important;
  height: var(--corner-size, 34px) !important;
  background-image: url('../img/bordertutap2_2.svg') !important;
  background-repeat: repeat-x !important;
  background-position: left top !important;
  background-size: var(--corner-size, 34px) var(--corner-size, 34px) !important;
  clip-path: inset(0 0 2px 0) !important;
}

.frame-edge-bottom {
  bottom: 0 !important;
  left: var(--corner-size, 34px) !important;
  right: var(--corner-size, 34px) !important;
  height: var(--corner-size, 34px) !important;
  background-image: url('../img/bordertutap2_8.svg') !important;
  background-repeat: repeat-x !important;
  background-position: left bottom !important;
  background-size: var(--corner-size, 34px) var(--corner-size, 34px) !important;
  clip-path: inset(2px 0 0 0) !important;
}

.frame-edge-left {
  left: 0 !important;
  top: var(--corner-size, 34px) !important;
  bottom: var(--corner-size, 34px) !important;
  width: var(--corner-size, 34px) !important;
  background-image: url('../img/bordertutap2_4.svg') !important;
  background-repeat: repeat-y !important;
  background-position: left top !important;
  background-size: var(--corner-size, 34px) var(--corner-size, 34px) !important;
  clip-path: inset(0 2px 0 0) !important;
}

.frame-edge-right {
  right: 0 !important;
  top: var(--corner-size, 34px) !important;
  bottom: var(--corner-size, 34px) !important;
  width: var(--corner-size, 34px) !important;
  background-image: url('../img/bordertutap2_6.svg') !important;
  background-repeat: repeat-y !important;
  background-position: right top !important;
  background-size: var(--corner-size, 34px) var(--corner-size, 34px) !important;
  clip-path: inset(0 0 0 2px) !important;
}

/* --------------------------------------------------------------------------
   ĐẶC BIỆT: Dùng bordertutap_*.svg cho:
   - Khối An Yên Từ Bên Trong (.hero-sanctuary-card)
   - Khối Ảnh Ban Thờ trong Modal Thắp Hương (.altar-image-stage)
   -------------------------------------------------------------------------- */
.hero-sanctuary-card .frame-corner-tl,
.altar-image-stage .frame-corner-tl,
.frame-modular-layer-altar .frame-corner-tl {
  background-image: url('../img/bordertutap_1.svg') !important;
}

.hero-sanctuary-card .frame-corner-tr,
.altar-image-stage .frame-corner-tr,
.frame-modular-layer-altar .frame-corner-tr {
  background-image: url('../img/bordertutap_3.svg') !important;
}

.hero-sanctuary-card .frame-corner-bl,
.altar-image-stage .frame-corner-bl,
.frame-modular-layer-altar .frame-corner-bl {
  background-image: url('../img/bordertutap_7.svg') !important;
}

.hero-sanctuary-card .frame-corner-br,
.altar-image-stage .frame-corner-br,
.frame-modular-layer-altar .frame-corner-br {
  background-image: url('../img/bordertutap_9.svg') !important;
}

.hero-sanctuary-card .frame-edge-top,
.altar-image-stage .frame-edge-top,
.frame-modular-layer-altar .frame-edge-top {
  background-image: url('../img/bordertutap_2.svg') !important;
}

.hero-sanctuary-card .frame-edge-bottom,
.altar-image-stage .frame-edge-bottom,
.frame-modular-layer-altar .frame-edge-bottom {
  background-image: url('../img/bordertutap_8.svg') !important;
}

.hero-sanctuary-card .frame-edge-left,
.altar-image-stage .frame-edge-left,
.frame-modular-layer-altar .frame-edge-left {
  background-image: url('../img/bordertutap_4.svg') !important;
}

.hero-sanctuary-card .frame-edge-right,
.altar-image-stage .frame-edge-right,
.frame-modular-layer-altar .frame-edge-right {
  background-image: url('../img/bordertutap_6.svg') !important;
}

/* ĐỒNG BỘ ĐỘ RỘNG CÁC KHỐI / KHUNG MỤC BẰNG NHAU TUYỆT ĐỐI */
.section-container {
  padding: 0 16px !important;
  margin-bottom: 20px !important;
  box-sizing: border-box !important;
}

.glass-kinhsach-container {
  padding: 0 16px !important;
  margin: 16px 0 20px 0 !important;
  box-sizing: border-box !important;
}

.section-container .native-card,
.glass-kinhsach-container .glass-kinhsach-card {
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.native-card,
.four-practice-grid {
  margin: 0 16px 16px 16px !important;
  width: calc(100% - 32px) !important;
  max-width: calc(100% - 32px) !important;
  box-sizing: border-box !important;
}

.section-container .native-card {
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.glass-kinhsach-card {
  padding: 14px 12px !important;
  position: relative !important;
  overflow: visible !important;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.3s ease !important;
}

/* TIÊU ĐỀ KHỐI ĐỒNG BỘ: CỘNG ĐỒNG, ĐIỂM ĐẾN, KINH SÁCH, ĐẠO MẪU */
.section-header-row,
.kinhsach-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--tt-card-border) !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
}

.section-title,
.kinhsach-title {
  color: var(--tt-gold) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  margin: 0 !important;
  letter-spacing: 0.3px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1.3 !important;
}

body.theme-light .section-title,
body.theme-light .kinhsach-title {
  color: #b48325 !important;
}

.section-link-more {
  color: var(--tt-gold) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  flex-shrink: 0 !important;
}

body.theme-light .section-link-more {
  color: #b48325 !important;
}

.kinhsach-title-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.kinhsach-search {
  flex: 0 0 auto !important;
  max-width: 170px !important;
}

.kinhsach-search-input {
  width: 100% !important;
  padding: 7px 12px !important;
  border: 1px solid var(--tt-card-border) !important;
  border-radius: 20px !important;
  background: var(--tt-card-bg-subtle) !important;
  color: var(--tt-text-title) !important;
  font-size: 12.5px !important;
  transition: all 0.2s ease !important;
  outline: none !important;
  box-sizing: border-box !important;
}

body.theme-light .kinhsach-search-input {
  background: #f7f3ec !important;
  border-color: #dfd4c0 !important;
  color: #362215 !important;
}

.kinhsach-search-input::placeholder {
  color: var(--tt-text-muted) !important;
}

.kinhsach-search-input:focus {
  border-color: var(--tt-gold) !important;
  box-shadow: 0 0 8px var(--tt-gold-glow) !important;
}

.hidden,
.kinhsach-grid.hidden {
  display: none !important;
}

.kinhsach-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}

@media (min-width: 600px) {
  .kinhsach-grid {
    grid-template-columns: repeat(6, 1fr) !important;
  }
}

.kinhsach-item {
  background: var(--tt-card-bg-subtle) !important;
  border: 1px solid var(--tt-card-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: all 0.25s ease !important;
  display: flex !important;
  flex-direction: column !important;
}

body.theme-light .kinhsach-item {
  background: #fcf9f2 !important;
  border-color: #e5dac7 !important;
}

.kinhsach-item:hover {
  transform: translateY(-2px) !important;
  border-color: var(--tt-gold) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
}

.kinhsach-image-wrapper {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  overflow: hidden !important;
  background: rgba(0, 0, 0, 0.1) !important;
}

.kinhsach-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.3s ease !important;
}

.kinhsach-item:hover .kinhsach-image {
  transform: scale(1.05) !important;
}

.kinhsach-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 50%) !important;
}

.kinhsach-name {
  color: var(--tt-text-title) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 6px 6px 8px 6px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-align: center !important;
}

body.theme-light .kinhsach-name {
  color: #4a3424 !important;
}

.kinhsach-footer {
  text-align: center !important;
  margin-top: 12px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--tt-card-border) !important;
}

.kinhsach-view-all {
  color: var(--tt-gold) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Tối ưu Footer trong Native App: ẩn trên mobile để giữ trải nghiệm 100% Native App */
.footer-nav {
  margin-bottom: 80px !important;
  opacity: 0.65;
  transition: opacity 0.2s ease;
}

.footer-nav:hover {
  opacity: 1;
}

@media (max-width: 600px) {
  .footer-nav {
    display: none !important;
  }
}

/* ==========================================================================
   SKELETON LOADING & SHIMMER EFFECT (TRẢI NGHIỆM MƯỢT TỨC THÌ NHƯ APP GỐC)
   ========================================================================== */
@keyframes tt-shimmer-sweep {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.tt-skeleton-shimmer {
  background: linear-gradient(90deg,
      rgba(240, 207, 117, 0.04) 0%,
      rgba(240, 207, 117, 0.16) 50%,
      rgba(240, 207, 117, 0.04) 100%) !important;
  background-size: 200% 100% !important;
  animation: tt-shimmer-sweep 1.8s infinite ease-in-out !important;
}

body.theme-light .tt-skeleton-shimmer {
  background: linear-gradient(90deg,
      rgba(180, 131, 37, 0.05) 0%,
      rgba(180, 131, 37, 0.18) 50%,
      rgba(180, 131, 37, 0.05) 100%) !important;
  background-size: 200% 100% !important;
}

/* Skeleton Overlay cho Ban Thờ Hero */
.hero-sanctuary-card {
  position: relative;
  overflow: hidden;
  background-color: var(--tt-card-bg);
}

.altar-skeleton-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--tt-card-bg);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px 20px;
}

.altar-skeleton-overlay.loaded {
  opacity: 0;
  visibility: hidden;
}

.skeleton-line {
  border-radius: 6px;
  margin-bottom: 10px;
}

.skeleton-btn {
  border-radius: 20px;
  height: 36px;
  width: 140px;
  display: inline-block;
}

/* Thẻ Lịch vạn niên Skeleton */
.calendar-skeleton-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--tt-card-bg);
  border-radius: var(--tt-radius-lg);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.35s ease;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.calendar-skeleton-overlay.loaded {
  opacity: 0;
  visibility: hidden;
}