.w3tuvi-wrap{
  background:#0b0b0e;
  color:#f6e7b6;
  border:1px solid rgba(246,231,182,.18);
  border-radius:18px;
  padding:16px;
  max-width:1100px;
  margin:18px auto;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.w3tuvi-title{ margin:0 0 6px; font-size:26px; }
.w3tuvi-sub{ margin:0 0 14px; color:rgba(246,231,182,.8); }

.w3tuvi-form{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  padding:12px;
  border:1px solid rgba(246,231,182,.12);
  border-radius:14px;
  background:rgba(255,255,255,.03);
}
.w3tuvi-row{ display:flex; flex-direction:column; gap:6px; }
.w3tuvi-form label{ font-size:13px; color:rgba(246,231,182,.85); }
.w3tuvi-form input, .w3tuvi-form select{
  border-radius:12px;
  border:1px solid rgba(246,231,182,.18);
  background:rgba(0,0,0,.25);
  color:#f6e7b6;
  padding:10px 12px;
  outline:none;
}
.w3tuvi-check{ grid-column: 1 / -1; }
.w3tuvi-btn{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(246,231,182,.35);
  background:linear-gradient(180deg, rgba(246,231,182,.18), rgba(0,0,0,.2));
  color:#f6e7b6;
  padding:11px 12px;
  cursor:pointer;
}
.w3tuvi-btn:hover{ filter:brightness(1.06); }
.w3tuvi-status{ margin:10px 2px 0; color:rgba(246,231,182,.9); }

.w3tuvi-result{ margin-top:14px; }
.w3tuvi-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.w3tuvi-pill{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(246,231,182,.16);
  background:rgba(255,255,255,.03);
  font-size:13px;
}

.w3tuvi-board{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(246,231,182,.12);
  background:rgba(255,255,255,.02);
}
.w3tuvi-cell{
  min-height:92px;
  border-radius:14px;
  border:1px solid rgba(246,231,182,.12);
  background:rgba(0,0,0,.22);
  padding:10px;
  display:block; /* chống theme override */
}
.w3tuvi-center{
  border-style:dashed;
  background:rgba(255,255,255,.015);
  display:flex !important;
  align-items:center;
  justify-content:center;
}
.w3tuvi-center-box{
  text-align:center;
  font-weight:800;
  letter-spacing:.8px;
}
.w3tuvi-center-box small{ font-weight:500; opacity:.75; }

.w3tuvi-cell-top{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:12px;
  opacity:.95;
}
.w3tuvi-chi{ font-weight:800; }
.w3tuvi-cung{ opacity:.9; }

.w3tuvi-cell-stars{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.w3tuvi-star{
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(246,231,182,.14);
  background:rgba(246,231,182,.06);
}

/* Star highlight (Thiên Thư style) */
.w3tuvi-star{
  font-weight:800;
  letter-spacing:.15px;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.w3tuvi-star.star-major{
  border-color:rgba(246,231,182,.50);
  background:linear-gradient(180deg, rgba(246,231,182,.28), rgba(246,231,182,.10));
}
.w3tuvi-star.star-good{
  border-color:rgba(120, 255, 190, .45);
  background:linear-gradient(180deg, rgba(120,255,190,.20), rgba(120,255,190,.08));
  color:rgba(214, 255, 233, .98);
}
.w3tuvi-star.star-bad{
  border-color:rgba(255, 120, 120, .45);
  background:linear-gradient(180deg, rgba(255,120,120,.20), rgba(255,120,120,.08));
  color:rgba(255, 210, 210, .98);
}
.w3tuvi-star.star-aux{
  border-color:rgba(160, 190, 255, .38);
  background:linear-gradient(180deg, rgba(160,190,255,.18), rgba(160,190,255,.06));
  color:rgba(232, 240, 255, .98);
}
.w3tuvi-muted{ opacity:.65; }

.w3tuvi-interpret{ margin-top:14px; padding:12px; border-radius:16px; border:1px solid rgba(246,231,182,.12); background:rgba(255,255,255,.02); }
.w3tuvi-interpret h2{ margin:0 0 8px; font-size:18px; }
.w3tuvi-houses{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; margin-top:12px; }
.w3tuvi-it{ border-radius:14px; border:1px solid rgba(246,231,182,.12); background:rgba(0,0,0,.20); padding:10px; }
.w3tuvi-it h3{ margin:0 0 6px; font-size:14px; }
.w3tuvi-it h3 small{ opacity:.75; font-weight:500; }
.w3tuvi-it p{ margin:0; color:rgba(246,231,182,.9); line-height:1.55; }

@media (max-width: 860px){
  .w3tuvi-form{ grid-template-columns: 1fr; }
  .w3tuvi-houses{ grid-template-columns: 1fr; }
}

.w3tuvi-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:820px){.w3tuvi-grid-2{grid-template-columns:1fr}}

.w3tuvi-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:820px){.w3tuvi-grid-3{grid-template-columns:1fr}}

.w3tuvi-panel{border:1px solid rgba(246,231,182,.18);border-radius:14px;padding:12px;background:rgba(255,255,255,.02)}

.w3tuvi-mini{border:1px solid rgba(246,231,182,.14);border-radius:14px;padding:12px;background:rgba(255,255,255,.015)}
.w3tuvi-mini .k{font-size:12px;opacity:.8;margin-bottom:4px}
.w3tuvi-mini .v{font-size:14px;line-height:1.35}

.w3tuvi-badges{display:flex;gap:10px;flex-wrap:wrap}
.w3tuvi-badge{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(246,231,182,.22);border-radius:999px;padding:8px 12px;background:rgba(255,255,255,.02);font-weight:700}
.w3tuvi-badge.soft{font-weight:600;opacity:.9}

.w3tuvi-btn.ghost{background:transparent;border:1px solid rgba(246,231,182,.25)}

.w3tuvi-note.ok{border-color:rgba(80,200,120,.35);color:#c9f2d2}

.w3tuvi-h4{font-size:14px;margin:10px 0 6px 0}

/* =====================================================
 * Thiên Thư – Bát Tự UI layer (shared)
 * - Dùng chung cho Hub / Lá số / Hạn / Hợp tuổi
 * ===================================================== */

/* Breadcrumb (Thiên Thư style) */
.tt-bc, .w3tuvi-bc{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  margin:0 auto 14px;
  max-width:1100px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(246,231,182,.12);
  background:rgba(255,255,255,.03);
  color:rgba(246,231,182,.9);
}
.tt-bc a, .w3tuvi-bc a{color:#f6e7b6;text-decoration:none;opacity:.9}
.tt-bc a:hover, .w3tuvi-bc a:hover{opacity:1;text-decoration:underline}
.tt-bc .sep, .w3tuvi-bc .sep{opacity:.55}
.tt-bc strong, .w3tuvi-bc strong{color:#f6e7b6}

/* Hero */
.w3tuvi-hero, .w3tuvi-hub-hero, .w3han-hero{
  border:1px solid rgba(246,231,182,.12);
  background:
    radial-gradient(1200px 400px at 20% -10%, rgba(246,231,182,.12), rgba(0,0,0,0)),
    radial-gradient(1000px 500px at 120% 10%, rgba(246,231,182,.08), rgba(0,0,0,0)),
    rgba(255,255,255,.02);
  border-radius:18px;
}
.w3tuvi-hero{padding:14px;margin:0 0 12px}
.w3tuvi-hero h1{margin:0 0 6px;font-size:26px}
.w3tuvi-hero p{margin:0;color:rgba(246,231,182,.85);line-height:1.6}

/* Khi hero/grid bọc bằng .w3tuvi-wrap (template hiện tại) thì giảm margin cho gọn */
.w3tuvi-wrap.w3tuvi-hub-hero,
.w3tuvi-wrap.w3han-hero{margin:0 auto 12px}
.w3tuvi-wrap.w3han-grid{margin:0 auto 14px}

.w3tuvi-hub-hero h1{margin:0 0 8px;font-size:28px}
.w3tuvi-hub-hero p{margin:0 0 12px;color:rgba(246,231,182,.85);line-height:1.6}

/* Card */
.w3tuvi-card, .w3han-card, .w3tuvi-box{
  border-radius:16px;
  padding:12px;
  border:1px solid rgba(246,231,182,.12);
  background:rgba(0,0,0,.22);
  box-shadow:0 8px 26px rgba(0,0,0,.28);
}
.w3tuvi-card .tag{display:inline-block;font-size:12px;opacity:.8;border:1px solid rgba(246,231,182,.14);background:rgba(246,231,182,.06);padding:3px 8px;border-radius:999px;margin-bottom:8px}
.w3tuvi-h2{margin:0 0 8px;font-size:16px}
.w3tuvi-h3{margin:0 0 8px;font-size:14px}

/* Note / alert */
.w3tuvi-note{
  border:1px solid rgba(246,231,182,.14);
  background:rgba(255,255,255,.02);
  border-radius:14px;
  padding:10px 12px;
  color:rgba(246,231,182,.88);
  line-height:1.6;
}

/* Knowledge box */
.w3tuvi-kb{
  border-radius:16px;
  padding:12px;
  border:1px solid rgba(246,231,182,.12);
  background:rgba(255,255,255,.02);
}
.w3tuvi-kb ul{margin:8px 0 0; padding-left:18px; color:rgba(246,231,182,.86); line-height:1.7}
.w3tuvi-kb li{margin:6px 0}

/* Hub layout */
.w3tuvi-hub-cta{display:flex;flex-wrap:wrap;gap:10px}
.w3tuvi-hub-cta a{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 12px;border-radius:12px;
  border:1px solid rgba(246,231,182,.28);
  background:linear-gradient(180deg, rgba(246,231,182,.14), rgba(0,0,0,.25));
  color:#f6e7b6;text-decoration:none;font-weight:800;
}
.w3tuvi-hub-cta a.secondary{background:rgba(0,0,0,.22);border-color:rgba(246,231,182,.16);font-weight:700;opacity:.95}
.w3tuvi-hub-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.w3tuvi-hub-sections{max-width:1100px;margin:14px auto 0;display:grid;grid-template-columns:1.2fr .8fr;gap:12px}
.w3tuvi-box{background:rgba(255,255,255,.02)}
.w3tuvi-box h3{margin:0 0 8px;font-size:16px}
.w3tuvi-box p{margin:0;color:rgba(246,231,182,.85);line-height:1.65}
.w3tuvi-box ul{margin:0;padding-left:18px;color:rgba(246,231,182,.85);line-height:1.65}
.w3tuvi-box li{margin:6px 0}

.w3tuvi-faq details{border:1px solid rgba(246,231,182,.12);border-radius:14px;padding:10px;background:rgba(0,0,0,.18);margin:10px 0}
.w3tuvi-faq summary{cursor:pointer;font-weight:900}
.w3tuvi-faq p{margin:8px 0 0;color:rgba(246,231,182,.85);line-height:1.6}

/* Hạn helpers (tags, table) */
.w3tag{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;
  border:1px solid rgba(246,231,182,.16);background:rgba(255,255,255,.03);margin:4px 6px 0 0;font-weight:800;font-size:13px}
.w3tag .k{opacity:.72;font-weight:700}
.w3muted{opacity:.75}
.w3list{margin:8px 0 0;padding-left:18px;color:rgba(246,231,182,.86);line-height:1.7}
.w3table{width:100%;border-collapse:separate;border-spacing:0;margin-top:8px;font-size:13px}
.w3table th,.w3table td{padding:10px;border-bottom:1px solid rgba(246,231,182,.10);vertical-align:top}
.w3table th{font-weight:900;color:rgba(246,231,182,.95);text-align:left}
.w3table td{color:rgba(246,231,182,.86)}
.w3row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

/* Hạn specific grid */
.w3han-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:12px}
.w3han-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.w3han-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:14px;border:1px solid rgba(246,231,182,.22);
  background:rgba(0,0,0,.32);color:#f6e7b6;text-decoration:none;font-weight:900;box-shadow:0 10px 28px rgba(0,0,0,.25)}
.w3han-btn:hover{background:rgba(0,0,0,.42)}
.w3han-form{display:grid;grid-template-columns:1fr;gap:10px}
.w3han-form .full{grid-column:1/-1}
.w3han-form label{display:block;font-weight:900;margin:0 0 6px;color:rgba(246,231,182,.95)}
.w3han-form input,.w3han-form select{width:100%;padding:10px;border-radius:12px;border:1px solid rgba(246,231,182,.18);
  background:rgba(0,0,0,.25);color:#f6e7b6;outline:none}
.w3han-form button{width:100%;padding:10px 12px;border-radius:12px;cursor:pointer;border:1px solid rgba(246,231,182,.28);
  background:linear-gradient(180deg, rgba(246,231,182,.14), rgba(0,0,0,.25));color:#f6e7b6;font-weight:900}
.w3han-bad{border-color: rgba(255,80,110,.28)!important}
.w3han-ok{border-color: rgba(100,255,190,.22)!important}

/* “Thầy luận theo cung” (palette cards) */
.w3pal{border-radius:16px;border:1px solid rgba(246,231,182,.12);background:rgba(255,255,255,.02);padding:12px;margin:10px 0}
.w3pal h4{margin:0 0 6px;font-size:14px}
.w3pal p{margin:8px 0 0;line-height:1.7;color:rgba(246,231,182,.88)}
.w3pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-weight:900;font-size:12px;
  border:1px solid rgba(246,231,182,.16);background:rgba(0,0,0,.22);margin:4px 6px 0 0}
.w3pill .k{opacity:.72;font-weight:800}
.w3pill.good{border-color: rgba(100,255,190,.22)}
.w3pill.bad{border-color: rgba(255,80,110,.24)}
.w3pill.neu{border-color: rgba(246,231,182,.16)}
.w3grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
@media (max-width: 980px){ .w3grid2{grid-template-columns:1fr} }

@media (max-width: 980px){
  .w3tuvi-hub-grid{grid-template-columns:1fr}
  .w3tuvi-hub-sections{grid-template-columns:1fr}
}