/* SI Skin – lớp giao diện phủ lên các khối của plugin miniai-core.
   Chỉ đổi cách trình bày, không đổi HTML. Màu và font lấy từ biến của theme.json
   (đổi thương hiệu trong brands/<tên>.json, không sửa file này). */

body{
  --si-paper:var(--wp--preset--color--paper,#FCFAF8);
  --si-sand:var(--wp--preset--color--sand,#F3F0EC);
  --si-surface:var(--wp--preset--color--surface,#FFFFFF);
  --si-ink:var(--wp--preset--color--ink,#1B1A19);
  --si-ink2:rgba(27,26,25,.74);
  --si-muted:var(--wp--preset--color--muted,#6B6863);
  --si-line:rgba(27,26,25,.12);
  --si-line2:rgba(27,26,25,.07);
  --si-action:var(--wp--preset--color--action,#2760E9);
  --si-action-soft:rgba(39,96,233,.09);
  --si-dark:#1B1A19;
  --si-r:var(--wp--custom--radius--card,20px);
  --si-display:var(--wp--preset--font-family--display);
  --si-body:var(--wp--preset--font-family--body);
}

/* Nền kéo tràn hai bên cho một khối alignwide (không đổi bố cục bên trong) */
.si-bleed,
body .wp-block-miniai-journey-flow,
body .wp-block-miniai-timeline,
body .wp-block-miniai-cta-band.is-aside-qr{
  background:var(--si-sand);
  box-shadow:0 0 0 100vmax var(--si-sand);
  clip-path:inset(0 -100vmax);
}

/* ---------- Header: dính trên cùng, nền kem mờ ---------- */
body .miniai-header{
  position:sticky;top:0;z-index:40;
  background:rgba(252,250,248,.92);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--si-line2);
}
body .miniai-header__bar{min-height:68px}
body .miniai-header .wp-block-navigation-item__content{font-size:15.5px;border-radius:10px;padding:10px 12px}
body .miniai-header .wp-block-navigation-item__content:hover{background:var(--si-sand)}
body .miniai-header .wp-block-navigation__submenu-container{
  border:1px solid var(--si-line)!important;border-radius:16px;
  box-shadow:0 18px 50px rgba(27,26,25,.12);padding:8px!important;background:var(--si-surface)!important;
}
body .miniai-header__login a{text-decoration:none;font-size:15px}
body .miniai-header .wp-block-button__link{border-radius:999px;padding:10px 18px;font-size:15px}

/* ---------- Hero: thành phố đêm (canvas city.js) ---------- */
body .wp-block-miniai-hero.has-city.has-city.has-city{
  background:#050913;color:#FCFAF8;
  padding-bottom:clamp(96px,10vw,140px);
}
body .wp-block-miniai-hero.has-city.has-city.has-city::before,
body .wp-block-miniai-hero.has-city.has-city.has-city::after,
body .wp-block-miniai-hero.has-city.has-city.has-city .wp-block-miniai-hero__bg{display:none}
body .wp-block-miniai-hero > #city{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
body .wp-block-miniai-hero.has-city.has-city.has-city > :not(#city):not(.city-start){position:relative;z-index:1}
body .wp-block-miniai-hero.has-city.has-city.has-city .wp-block-miniai-hero__title{color:#FCFAF8}
body .wp-block-miniai-hero.has-city.has-city.has-city .wp-block-miniai-hero__subhead,
body .wp-block-miniai-hero.has-city.has-city.has-city .wp-block-miniai-hero__trust{color:rgba(252,250,248,.74)}
body .wp-block-miniai-hero.has-city.has-city.has-city .wp-block-button:not(.is-style-action) .wp-block-button__link{
  background:transparent;color:#FCFAF8;box-shadow:inset 0 0 0 1px rgba(252,250,248,.38);
}
body .wp-block-miniai-hero.has-city.has-city.has-city .wp-block-miniai-hero__aside{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.22);border-radius:24px;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}

/* ---------- Thẻ "nỗi đau" / niềm tin: lưới liền, vạch chia 1px ---------- */
body .wp-block-miniai-trust-cards__cards{
  gap:1px!important;background:var(--si-line);
  border:1px solid var(--si-line);border-radius:var(--si-r);overflow:hidden;
}
body .wp-block-miniai-trust-cards__card{
  background:var(--si-surface);border:0!important;border-radius:0!important;box-shadow:none!important;padding:24px;
}
body .wp-block-miniai-trust-cards__icon.is-index{
  display:inline-flex;align-items:center;font:500 13px/1 var(--si-body);
  background:var(--si-sand);border:1px solid var(--si-line2);border-radius:999px;padding:6px 11px;width:fit-content;height:auto;
  justify-self:start;align-self:flex-start;
}
body .wp-block-miniai-trust-cards__card-title{font:500 18px/1.3 var(--si-body)}
body .wp-block-miniai-trust-cards__text{color:var(--si-ink2);font-size:15.5px}

/* ---------- Lưới sản phẩm: thẻ trắng, nổi lên khi rê chuột ---------- */
body .wp-block-miniai-product-grid__card{
  background:var(--si-surface);border:1px solid var(--si-line);border-radius:var(--si-r);padding:24px;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s;
}
body .wp-block-miniai-product-grid__card:hover{
  transform:translateY(-3px);border-color:var(--si-action);box-shadow:0 16px 36px rgba(27,26,25,.07);
}
body .wp-block-miniai-product-grid__more{color:var(--si-action);font-weight:500}
body .wp-block-miniai-product-grid__label{font:600 12px/1.2 var(--si-body);letter-spacing:.06em;text-transform:uppercase;color:var(--si-muted)}

/* ---------- Giới thiệu sản phẩm (ảnh + chữ) ---------- */
body .wp-block-miniai-product-spotlight__label{
  font:600 12px/1.2 var(--si-body);letter-spacing:.06em;text-transform:uppercase;color:var(--si-action);
}
body .wp-block-miniai-product-spotlight__media{
  border-radius:var(--si-r);overflow:hidden;border:1px solid var(--si-line2);background:var(--si-sand);
}
body .wp-block-miniai-product-spotlight__link{color:var(--si-action);font-weight:500;text-decoration:none}

/* ---------- Hành trình khách hàng (5 bước) ---------- */
body .wp-block-miniai-journey-flow__node{
  background:var(--si-surface);border:1px solid var(--si-line);
  font-family:var(--si-display);
}
body .wp-block-miniai-journey-flow__tag{
  display:inline-flex;font:500 12.5px/1 var(--si-body);background:var(--si-surface);
  border:1px solid var(--si-line2);border-radius:999px;padding:6px 10px;
}

/* ---------- Tab tính năng: nút dạng viên thuốc ---------- */
body .wp-block-miniai-feature-tabs__tablist{
  display:inline-flex;gap:2px;padding:4px;background:var(--si-sand);border-radius:999px;border:1px solid var(--si-line2);
}
body .wp-block-miniai-feature-tabs__tab{border-radius:999px}
body .wp-block-miniai-feature-tabs__tab[aria-selected="true"]{background:var(--si-surface);box-shadow:0 1px 3px rgba(27,26,25,.12)}
body .wp-block-miniai-feature-tabs__feature{background:var(--si-surface);border:1px solid var(--si-line);border-radius:var(--si-r)}

/* ---------- Lộ trình 30 ngày ---------- */
body .wp-block-miniai-timeline__label{
  font:600 11.5px/1.2 var(--si-body);letter-spacing:.06em;text-transform:uppercase;color:var(--si-muted);
}
body .wp-block-miniai-timeline__step-title{font:500 17px/1.3 var(--si-body)}

/* ---------- Con số: chữ lớn màu nhấn, vạch trên đậm ---------- */
body .wp-block-miniai-stats__tiles{border-top:1px solid var(--si-ink);border-bottom:1px solid var(--si-line);gap:0!important}
body .wp-block-miniai-stats__tile{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:24px 20px 22px 0}
body .wp-block-miniai-stats__tile + .wp-block-miniai-stats__tile{padding-left:20px;border-left:1px solid var(--si-line)!important}
body .wp-block-miniai-stats__value{font:400 clamp(36px,4vw,46px)/1 var(--si-display);color:var(--si-action);font-variant-numeric:tabular-nums}
body .wp-block-miniai-stats__label{font-size:14.5px;color:var(--si-ink2)}

/* ---------- FAQ ---------- */
body .wp-block-miniai-faq__item{border-bottom:1px solid var(--si-line)}
body .wp-block-miniai-faq__item:first-child{border-top:1px solid var(--si-line)}
body .wp-block-miniai-faq__q{font:400 20px/1.35 var(--si-display);padding-block:20px}
body .wp-block-miniai-faq__a{color:var(--si-ink2);max-width:68ch}

/* ---------- Bài viết mới ---------- */
body .wp-block-miniai-latest-posts__card{
  background:var(--si-surface);border:1px solid var(--si-line);border-radius:var(--si-r);padding:24px;
}
body .wp-block-miniai-latest-posts__cat{font:600 12px/1.2 var(--si-body);letter-spacing:.06em;text-transform:uppercase;color:var(--si-action)}

/* ---------- Báo chí ---------- */
body .wp-block-miniai-press__article{border-top:1px solid var(--si-line);padding-top:16px}

/* ---------- CTA cuối trang (có form): nền tối, form trắng ---------- */
body .wp-block-miniai-cta-band.is-aside-form{
  background:var(--si-dark);color:#FCFAF8;
  box-shadow:0 0 0 100vmax var(--si-dark);clip-path:inset(0 -100vmax);
  padding-block:clamp(64px,8vw,104px);
}
body .wp-block-miniai-cta-band.is-aside-form .wp-block-miniai-cta-band__title{color:#FCFAF8}
body .wp-block-miniai-cta-band.is-aside-form .wp-block-miniai-cta-band__eyebrow{color:#9DB6F2}
body .wp-block-miniai-cta-band.is-aside-form .wp-block-miniai-cta-band__text,
body .wp-block-miniai-cta-band.is-aside-form .wp-block-miniai-cta-band__socials-label{color:rgba(252,250,248,.72)}
body .wp-block-miniai-cta-band.is-aside-form .wp-block-miniai-cta-band__socials a{
  color:#FCFAF8;background:transparent;border:1px solid rgba(252,250,248,.25);
}
body .wp-block-miniai-cta-band.is-aside-form .wp-block-miniai-cta-band__socials a:hover{background:rgba(252,250,248,.08)}
body .wp-block-miniai-cta-band.is-aside-form .wp-block-miniai-cta-band__aside{
  background:var(--si-surface);color:var(--si-ink);border-radius:24px;padding:clamp(20px,3vw,32px);
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}
body .wp-block-miniai-cta-band__aside input,
body .wp-block-miniai-cta-band__aside select,
body .wp-block-miniai-cta-band__aside textarea{border-radius:var(--wp--custom--radius--input,12px)}

/* ---------- CTA có mã QR: khối nền cát bo lớn ---------- */
body .wp-block-miniai-cta-band.is-aside-qr .wp-block-miniai-cta-band__qr{
  background:var(--si-surface);border:1px solid var(--si-line);border-radius:var(--si-r);padding:16px;
}

/* ---------- Footer: nền cát, cột nhãn chữ in hoa ---------- */
body footer.wp-block-template-part{background:var(--si-sand);border-top:1px solid var(--si-line2)}
body footer.wp-block-template-part h2,
body footer.wp-block-template-part h3,
body footer.wp-block-template-part .wp-block-heading{
  font:600 12px/1.2 var(--si-body);letter-spacing:.06em;text-transform:uppercase;color:var(--si-muted);
}
body footer.wp-block-template-part a{text-decoration:none}
body footer.wp-block-template-part a:hover{color:var(--si-action)}

@media (max-width:860px){
  body .wp-block-miniai-stats__tile + .wp-block-miniai-stats__tile{padding-left:0;border-left:0!important;border-top:1px solid var(--si-line)!important}
  body .wp-block-miniai-hero.has-city.has-city.has-city{padding-bottom:96px}
}
@media (prefers-reduced-motion:reduce){
  body .wp-block-miniai-product-grid__card{transition:none}
}

/* Tên thương hiệu thay logo khi chưa tải logo */
body .si-site-title{font:500 22px/1 var(--si-display);letter-spacing:-.01em;margin:0}
body .si-site-title a{text-decoration:none;color:var(--si-ink)}
