/*
Theme Name: Hoàng Gia Thần Số
Theme URI: https://hoanggiathanso.vn/
Author: Hoàng Gia Thần Số
Description: Theme WordPress phong cách Hoàng Gia Thần Số, chuyển từ bộ HTML tĩnh. Tương thích PHP 7.4+.
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
Text Domain: hoang-gia-thanso
*/

:root{
  --ivory:#FBF7EF;
  --parchment:#F3EBDA;
  --parchment-deep:#EADFC6;
  --ink:#2E2A22;
  --ink-soft:#665D48;
  --gold:#A87F3F;
  --gold-bright:#C9A356;
  --gold-pale:#E7D8B4;
  --wine:#6E2A3A;
  --wine-deep:#4E1C28;
  --hairline:#DCCDA4;
  --white:#FFFFFF;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--ivory);
  color:var(--ink);
  font-family:'Be Vietnam Pro', sans-serif;
  font-weight:300;
  line-height:1.7;
}
h1,h2,h3,h4, .font-display{
  font-family:'Be Vietnam Pro', sans-serif;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.01em;
}
.eyebrow{
  font-family:'Be Vietnam Pro', sans-serif;
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
}
.text-wine{color:var(--wine);}
.text-gold{color:var(--gold);}
.bg-parchment{background:var(--parchment);}
.bg-wine{background:var(--wine);}
a{color:var(--wine); text-decoration:none;}
a:hover{color:var(--gold);}

/* ---------- ornamental hairline rule ---------- */
.rule{
  width:64px;height:1px;background:var(--gold);
  margin:18px 0;
}
.rule.center{margin-left:auto;margin-right:auto;}
.rule-thin{border-top:1px solid var(--hairline);}

/* ---------- corner flourish frame ---------- */
.flourish-frame{position:relative;}
.flourish-frame::before,
.flourish-frame::after{
  content:"";
  position:absolute;
  width:34px;height:34px;
  border:1px solid var(--gold);
  opacity:.55;
}
.flourish-frame::before{top:-14px;left:-14px;border-right:none;border-bottom:none;}
.flourish-frame::after{bottom:-14px;right:-14px;border-left:none;border-top:none;}

/* ---------- navbar ---------- */
.navbar-royal{
  background:rgba(251,247,239,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--hairline);
  padding-top:.9rem;padding-bottom:.9rem;
}
.brand-mark{
  width:44px;height:44px;
  border:1px solid var(--gold);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Be Vietnam Pro', sans-serif;
  font-size:1.1rem;
  color:var(--wine);
  position:relative;
}
.brand-mark::before{
  content:"";
  position:absolute; inset:4px;
  border:1px solid var(--gold-pale);
  border-radius:50%;
}
.brand-text{font-family:'Be Vietnam Pro', sans-serif; font-weight:600; font-size:1.28rem; letter-spacing:.03em; color:var(--ink);}
.brand-text small{display:block; font-family:'Be Vietnam Pro',sans-serif; font-size:.6rem; letter-spacing:.28em; color:var(--gold); font-weight:600; text-transform:uppercase;}

.nav-link-royal{
  font-size:.86rem;
  letter-spacing:.05em;
  color:var(--ink-soft) !important;
  margin:0 .7rem;
  padding:.4rem 0 !important;
  border-bottom:1px solid transparent;
  transition:.25s;
}
.nav-link-royal:hover, .nav-link-royal.active{
  color:var(--wine) !important;
  border-bottom:1px solid var(--gold);
}
.btn-royal-outline{
  border:1px solid var(--gold);
  color:var(--wine);
  font-size:.82rem;
  letter-spacing:.06em;
  padding:.5rem 1.3rem;
  border-radius:0;
  background:transparent;
  transition:.25s;
}
.btn-royal-outline:hover{background:var(--wine); border-color:var(--wine); color:var(--white);}
.btn-royal{
  background:var(--wine);
  color:var(--white) !important;
  border:1px solid var(--wine);
  font-size:.84rem;
  letter-spacing:.08em;
  padding:.75rem 2.1rem;
  border-radius:0;
  text-transform:uppercase;
  transition:.3s;
}
.btn-royal:hover{background:var(--wine-deep); border-color:var(--wine-deep); color:var(--white);}
.btn-gold-line{
  background:transparent;
  border:1px solid var(--gold);
  color:var(--wine);
  font-size:.8rem;
  letter-spacing:.08em;
  padding:.7rem 1.8rem;
  border-radius:0;
  text-transform:uppercase;
}
.btn-gold-line:hover{background:var(--gold); color:var(--white); border-color:var(--gold);}

/* ---------- hero ---------- */
.hero{
  padding:150px 0 90px;
  position:relative;
  overflow:hidden;
}
.hero-astrolabe{width:100%; max-width:420px;}
.hero .display-title{
  font-size:clamp(2.4rem, 4.4vw, 3.6rem);
  line-height:1.14;
}
.hero .lede{
  color:var(--ink-soft);
  font-size:1.05rem;
  max-width:480px;
}
.stat-strip{
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  padding:34px 0;
}
.stat-num{
  font-family:'Be Vietnam Pro', sans-serif;
  font-size:2.6rem;
  color:var(--wine);
  font-weight:600;
}
.stat-label{
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* ---------- section title ---------- */
.section-pad{padding:96px 0;}
.section-head{max-width:640px;}
.section-head h2{font-size:clamp(1.9rem,3vw,2.5rem);}

/* ---------- calculator card ---------- */
.calc-panel{
  background:var(--white);
  border:1px solid var(--hairline);
  padding:48px;
  position:relative;
}
.calc-panel label{
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:.4rem;
}
.form-control-royal{
  border:none;
  border-bottom:1px solid var(--hairline);
  border-radius:0;
  background:transparent;
  padding:.55rem .1rem;
  font-family:'Be Vietnam Pro',sans-serif;
  color:var(--ink);
}
.form-control-royal:focus{
  box-shadow:none;
  border-bottom:1px solid var(--gold);
  background:transparent;
}
.package-choice{
  border:1px solid var(--hairline);
  padding:16px 18px;
  cursor:pointer;
  transition:.2s;
  height:100%;
}
.package-choice:hover{border-color:var(--gold);}
.package-choice.selected{border-color:var(--wine); background:var(--parchment);}
.package-choice .p-title{font-family:'Be Vietnam Pro',sans-serif; font-weight:600; font-size:1.15rem;}
.package-choice .p-price{color:var(--wine); font-weight:600; font-size:.85rem;}

.result-box{
  border:1px solid var(--gold);
  background:var(--parchment);
  padding:30px;
  display:none;
}
.result-num{
  font-family:'Be Vietnam Pro', sans-serif;
  font-size:3.4rem;
  color:var(--wine);
  line-height:1;
}

/* ---------- full index grid (kết quả 24 chỉ số) ---------- */
.index-card{
  background:var(--white);
  border:1px solid var(--hairline);
  padding:22px 14px;
  text-align:center;
  height:100%;
  position:relative;
  transition:.2s;
}
.index-card:hover{border-color:var(--gold);}
.index-card .idx-label{
  font-size:.66rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  min-height:2.4em;
  display:flex;align-items:center;justify-content:center;
}
.index-card .idx-value{
  font-family:'Be Vietnam Pro', sans-serif;
  font-size:2.1rem;
  color:var(--wine);
  font-weight:600;
  margin-top:6px;
  line-height:1.1;
}
.index-card .idx-sub{
  font-size:.68rem;
  color:var(--gold);
  margin-top:2px;
}
.index-card .idx-flag{
  position:absolute;
  top:-10px;left:50%;
  transform:translateX(-50%);
  background:var(--wine);
  color:var(--white);
  font-size:.6rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:3px 10px;
  white-space:nowrap;
}

/* ---------- PDF download block ---------- */
.pdf-panel{
  border:1px solid var(--gold);
  background:var(--white);
  padding:34px;
  margin-top:36px;
}
.pdf-panel .pdf-icon{
  width:52px;height:52px;
  border:1px solid var(--gold);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--wine);
  flex:none;
}
.upgrade-note{
  font-size:.86rem;
  color:var(--ink-soft);
  border-top:1px dashed var(--hairline);
  margin-top:22px;
  padding-top:18px;
}
.qr-box{
  display:none;
  margin-top:20px;
  padding:24px;
  background:var(--parchment);
  border:1px solid var(--gold);
  text-align:center;
}
.qr-box img, .qr-box svg{
  width:150px;height:150px;
  border:1px solid var(--hairline);
  background:var(--white);
  padding:8px;
}
.btn-zalo{
  background:#0068FF;
  color:var(--white) !important;
  border:1px solid #0068FF;
  font-size:.82rem;
  letter-spacing:.05em;
  padding:.6rem 1.6rem;
  border-radius:0;
}
.btn-zalo:hover{background:#0052cc; border-color:#0052cc;}

/* ---------- benefits ---------- */
.benefit-item{padding:26px 10px;}
.benefit-icon{
  width:56px;height:56px;
  border:1px solid var(--gold);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;
  color:var(--wine);
}

/* ---------- number cabinet ---------- */
.medallion{
  width:100%;
  aspect-ratio:1/1;
  border:1px solid var(--gold);
  border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--white);
  cursor:pointer;
  transition:.25s;
  position:relative;
}
.medallion::before{
  content:"";
  position:absolute; inset:6px;
  border:1px solid var(--gold-pale);
  border-radius:50%;
}
.medallion:hover{
  background:var(--wine);
  border-color:var(--wine);
}
.medallion:hover .medallion-num, .medallion:hover .medallion-label{color:var(--white);}
.medallion:hover::before{border-color:rgba(255,255,255,.4);}
.medallion-num{
  font-family:'Be Vietnam Pro', sans-serif;
  font-size:2.1rem;
  color:var(--wine);
  font-weight:600;
}
.medallion-label{
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:2px;
}

/* ---------- accordion royal ---------- */
.accordion-royal .accordion-item{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--hairline);
  border-radius:0;
}
.accordion-royal .accordion-button{
  background:transparent;
  font-family:'Be Vietnam Pro', sans-serif;
  font-size:1.28rem;
  font-weight:600;
  color:var(--ink);
  box-shadow:none;
  padding:1.4rem 0;
}
.accordion-royal .accordion-button:not(.collapsed){color:var(--wine); background:transparent;}
.accordion-royal .accordion-button::after{
  filter:sepia(1) saturate(3) hue-rotate(-10deg) brightness(.85);
}
.accordion-royal .accordion-body{
  padding:0 0 1.6rem;
  color:var(--ink-soft);
  font-size:.96rem;
}

/* ---------- blog cards ---------- */
.blog-card{
  border:1px solid var(--hairline);
  background:var(--white);
  height:100%;
  transition:.25s;
}
.blog-card:hover{border-color:var(--gold);}
.blog-card .blog-thumb{
  height:150px;
  background:linear-gradient(135deg, var(--parchment), var(--parchment-deep));
  display:flex;align-items:center;justify-content:center;
}
.blog-card .blog-body{padding:24px;}
.blog-card h5{font-family:'Be Vietnam Pro',sans-serif; font-size:1.2rem;}
.blog-card p{font-size:.86rem; color:var(--ink-soft);}
.read-more{font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;}

/* ---------- cta banner ---------- */
.cta-banner{
  background:var(--wine);
  color:var(--white);
  padding:80px 0;
  position:relative;
}
.cta-banner h2{color:var(--white);}
.cta-banner .rule{background:var(--gold-bright);}

/* ---------- footer ---------- */
footer{
  background:var(--parchment);
  border-top:1px solid var(--hairline);
  padding-top:70px;
}
footer h6{
  font-family:'Be Vietnam Pro',sans-serif;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.1rem;
}
footer a{
  color:var(--ink-soft);
  font-size:.88rem;
  display:block;
  margin-bottom:.55rem;
}
footer a:hover{color:var(--wine);}
.social-dot{
  width:38px;height:38px;
  border:1px solid var(--gold);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--wine);
}
.footer-bottom{
  border-top:1px solid var(--hairline);
  margin-top:50px;
  padding:22px 0;
  font-size:.78rem;
  color:var(--ink-soft);
}

@media (max-width: 767px){
  .hero{padding:120px 0 60px;}
  .calc-panel{padding:28px;}
}

/* WordPress / content helpers */
.wp-caption,.gallery-caption{max-width:100%;}
.alignleft{float:left;margin:0 1.5rem 1rem 0}.alignright{float:right;margin:0 0 1rem 1.5rem}.aligncenter{display:block;margin-left:auto;margin-right:auto}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.blog-thumb{overflow:hidden;position:relative}.blog-thumb img{object-fit:cover;display:block}.blog-card .blog-body{display:flex;flex-direction:column;height:calc(100% - 210px)}.blog-card .read-more{margin-top:auto}
.news-meta{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);}
.archive-hero,.single-hero{padding:145px 0 70px;background:var(--parchment)}
.news-grid{padding:80px 0 100px}
.news-card{border:1px solid var(--hairline);background:var(--white);height:100%;transition:.25s;display:flex;flex-direction:column}.news-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.news-thumb{height:210px;background:linear-gradient(135deg,var(--parchment),var(--parchment-deep));display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.news-thumb .num{font-size:4.5rem;color:var(--gold);font-weight:600;opacity:.75}.news-thumb:after{content:"";position:absolute;inset:18px;border:1px solid var(--gold-pale)}
.news-body{padding:28px;display:flex;flex-direction:column;flex:1}.news-body h2{font-size:1.35rem;margin:10px 0 12px}.news-body p{font-size:.88rem;color:var(--ink-soft);margin-bottom:22px}.news-read{margin-top:auto;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
.article-wrap{padding:65px 0 100px}.article{background:var(--white);border:1px solid var(--hairline);padding:55px 65px}.article .article-meta{color:var(--gold);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}.article h1{font-size:clamp(2rem,4vw,3.2rem);line-height:1.2;margin:14px 0 18px}.article .lead{font-size:1.08rem;color:var(--ink-soft);border-left:2px solid var(--gold);padding-left:20px;margin:25px 0 35px}.article h2{font-size:1.65rem;margin-top:38px}.article p,.article li{font-size:.98rem;color:var(--ink-soft)}.article blockquote{margin:30px 0;padding:25px 28px;background:var(--parchment);border-left:3px solid var(--wine)}
.pagination .page-numbers{display:inline-block;padding:.5rem .75rem;border:1px solid var(--hairline);margin:.15rem;color:var(--wine)}.pagination .current{background:var(--wine);color:#fff;border-color:var(--wine)}
@media(max-width:767px){.article{padding:30px 22px}.archive-hero,.single-hero{padding:120px 0 50px}.news-thumb{height:170px}}

/* ---------- lookup validation / AJAX ---------- */
.field-error,.form-error{font-size:.76rem;color:var(--wine);margin-top:6px;min-height:0}
.form-error{text-align:center;margin-top:10px}
.form-control-royal.is-invalid{border-color:var(--wine);box-shadow:0 0 0 .12rem rgba(110,42,58,.08)}
.lookup-loading{display:none;align-items:center;justify-content:center;gap:8px}
#lookupSubmit.is-loading .btn-label{display:none}
#lookupSubmit.is-loading .lookup-loading{display:inline-flex}
#lookupSubmit.is-loading{pointer-events:none;opacity:.82}
#lookupSubmit .spinner-border{border-width:.16em}
#resultBox.is-error{border-color:var(--wine)}