/* =====================================================================
   Nếp Sao · Lớp giao diện mới (v2)
   - Nạp sau cùng (inc/nepsao.php, ưu tiên 100), chỉ đổi HÌNH THỨC.
   - Mọi nút hành động dùng gradient xanh; logo SVG; ảnh núi/trúc/hoa sen.
   - Không đổi class/ID mà JS đang dùng.
   ===================================================================== */
:root {
  --ns-jade: #0e4a31;
  --ns-jade-dark: #0b3d27;
  --ns-jade-deep: #145a3c;
  --ns-gold: #c08a2c;
  --ns-gold-soft: #b07a1f;
  --ns-gold-dark: #8a5a16;
  --ns-parchment: #fdfdfb;
  --ns-paper: #f7f6f2;
  --ns-paper2: #f8f6f1;
  --ns-ink: #1f2a24;
  --ns-ink-light: #3c4842;
  --ns-muted: #6b756f;
  --ns-border: #ece8de;
  --ns-border-warm: #ebe7de;
  --ns-mint: #dcf3e2;
  --ns-grad: linear-gradient(135deg, #2c9465 0%, #17714b 45%, #0b4a30 100%);
  --ns-grad-hover: linear-gradient(135deg, #34a571 0%, #1b7f55 45%, #0d5537 100%);
  --ns-grad-light: linear-gradient(135deg, #52c08a 0%, #2a9566 50%, #177049 100%);
  --ns-grad-shadow: 0 2px 6px rgba(11, 74, 48, .22), inset 0 1px 0 rgba(255, 255, 255, .18);
  --ns-grad-shadow-hover: 0 6px 16px rgba(11, 74, 48, .28), inset 0 1px 0 rgba(255, 255, 255, .2);
}
body { background-color: var(--ns-parchment); }
body.ns-page { background-image: none; }

/* ---------------------------------------------------------------------
   NÚT: mọi nút hành động → gradient xanh
   --------------------------------------------------------------------- */
.ns-site .ns-btn, .ns-site .ns-btn--jade, .ns-site .ns-btn--ghost,
.ns-site .ns-header__cta,
.ns-site .ns-abtn:not(.ns-abtn--danger),
.ns-site .ns-plan__btn, .ns-site .tuvi-plan-btn,
.ns-site .ns-upsell__btn, .ns-site .ns-ribbon__btn, .ns-site .ns-unlockcard__btn,
.ns-site .ns-more__btn, .ns-site .ns-locked__cta, .ns-site .ns-entbar__btn,
.ns-site .ns-bupgrade__btn, .ns-site .ns-academy__btn, .ns-site .ns-bcapsule__genbtn,
.ns-site .ns-expand-btn, .ns-site .ns-basic-foldbtn,
.ns-site .ns-cf-submit, .ns-site .ns-cf-findhour,
.ns-site .ns-auth__submit, .ns-site .ns-sepay-paid__btn,
.ns-site .ns-savemodal__primary, .ns-site .ns-savemodal__ghost,
.ns-site .ns-bchat__send, .ns-site .ns-audio-pillbtn,
.ns-site .is-unlock-btn, .ns-site .is-unlock-cta, .ns-site .tuvi-unlock-btn,
.ns-site .pdf-btn, .ns-site .tuvi-buttons button, .ns-site .tuvi-buttons a,
.ns-site .primary-button, .ns-site .secondary-button, .ns-site .sample-button,
.ns-site .woocommerce a.button, .ns-site .woocommerce button.button, .ns-site .woocommerce input.button,
.ns-site .woocommerce #respond input#submit, .ns-site #place_order, .ns-site .woocommerce-button,
.ns-site .wc-block-components-button, .ns-site .ns-act,
.ns-modal .ns-auth__submit {
  background: var(--ns-grad) !important;
  color: #fff !important;
  border: 0 !important;
  border-color: transparent !important;
  box-shadow: var(--ns-grad-shadow) !important;
  text-shadow: none !important;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease !important;
}
.ns-site .ns-btn:hover, .ns-site .ns-header__cta:hover,
.ns-site .ns-abtn:not(.ns-abtn--danger):hover,
.ns-site .ns-plan__btn:hover, .ns-site .tuvi-plan-btn:hover,
.ns-site .ns-upsell__btn:hover, .ns-site .ns-ribbon__btn:hover, .ns-site .ns-unlockcard__btn:hover,
.ns-site .ns-more__btn:hover, .ns-site .ns-locked__cta:hover, .ns-site .ns-entbar__btn:hover,
.ns-site .ns-bupgrade__btn:hover, .ns-site .ns-academy__btn:hover, .ns-site .ns-bcapsule__genbtn:hover,
.ns-site .ns-expand-btn:hover, .ns-site .ns-basic-foldbtn:hover,
.ns-site .ns-cf-submit:hover, .ns-site .ns-cf-findhour:hover,
.ns-site .ns-auth__submit:hover, .ns-site .ns-sepay-paid__btn:hover,
.ns-site .ns-savemodal__primary:hover, .ns-site .ns-savemodal__ghost:hover,
.ns-site .ns-bchat__send:hover, .ns-site .ns-audio-pillbtn:hover,
.ns-site .is-unlock-btn:hover, .ns-site .is-unlock-cta:hover, .ns-site .tuvi-unlock-btn:hover,
.ns-site .pdf-btn:hover, .ns-site .tuvi-buttons button:hover, .ns-site .tuvi-buttons a:hover,
.ns-site .primary-button:hover, .ns-site .secondary-button:hover, .ns-site .sample-button:hover,
.ns-site .woocommerce a.button:hover, .ns-site .woocommerce button.button:hover, .ns-site .woocommerce input.button:hover,
.ns-site #place_order:hover, .ns-site .woocommerce-button:hover, .ns-site .wc-block-components-button:hover, .ns-site .ns-act:hover,
.ns-modal .ns-auth__submit:hover {
  background: var(--ns-grad-hover) !important;
  color: #fff !important;
  box-shadow: var(--ns-grad-shadow-hover) !important;
  transform: translateY(-1px);
}
.ns-site [disabled].ns-abtn, .ns-site .ns-plan__btn.is-disabled, .ns-site button[disabled].ns-cf-submit,
.ns-site .ns-auth__submit[disabled], .ns-modal .ns-auth__submit[disabled] { opacity: .6; transform: none; cursor: not-allowed; }
/* Chữ / biểu tượng bên trong nút gradient luôn trắng */
.ns-site .ns-btn *, .ns-site .ns-abtn:not(.ns-abtn--danger) *, .ns-site .ns-plan__btn *, .ns-site .ns-upsell__btn *,
.ns-site .ns-ribbon__btn *, .ns-site .ns-cf-submit *, .ns-site .ns-auth__submit *, .ns-modal .ns-auth__submit *,
.ns-site .ns-unlockcard__btn *, .ns-site .ns-more__btn *, .ns-site .ns-locked__cta *, .ns-site .ns-entbar__btn *,
.ns-site .ns-bupgrade__btn *, .ns-site .ns-academy__btn *, .ns-site .ns-expand-btn *, .ns-site .ns-basic-foldbtn *,
.ns-site .ns-sepay-paid__btn *, .ns-site .ns-savemodal__primary *, .ns-site .ns-savemodal__ghost *, .ns-site .ns-cf-findhour *,
.ns-site .ns-bcapsule__genbtn *, .ns-site .ns-audio-pillbtn *, .ns-site .ns-act * { color: #fff !important; }
/* Nút trên nền xanh đậm: gradient sáng hơn để nổi */
.ns-site .ns-upsell .ns-upsell__btn, .ns-site .ns-abtn--goldsolid, .ns-site .ns-abtn--glass, .ns-site .ns-abtn--white,
.ns-site .ns-ribbon .ns-ribbon__btn { background: var(--ns-grad-light) !important; }
/* Tab / bộ chọn đang bật cũng dùng gradient */
.ns-site .ns-tabs__btn.is-active, .ns-site .ns-modetab.is-active, .ns-site .ns-mock__tab.is-active,
.ns-site .ns-auth__tab.is-active, .ns-modal .ns-auth__tab.is-active, .ns-site .ns-seg button.is-active,
.ns-site .ns-chip.is-active, .ns-site .ns-filter.is-active {
  background: var(--ns-grad) !important; color: #fff !important; border-color: transparent !important; box-shadow: var(--ns-grad-shadow) !important;
}
.ns-site .ns-tabs__btn.is-active *, .ns-site .ns-modetab.is-active *, .ns-site .ns-mock__tab.is-active *,
.ns-site .ns-auth__tab.is-active *, .ns-modal .ns-auth__tab.is-active * { color: #fff !important; }

/* ---------------------------------------------------------------------
   LOGO
   --------------------------------------------------------------------- */
.ns-brand { gap: 10px; }
.ns-brand__logo--mark { width: 44px; height: 44px; border: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0; color: #123f30; }
.ns-brand__logo--mark .ns-logo-mark { width: 44px; height: 44px; }
.ns-brand:hover .ns-brand__logo--mark { background: none; }
.ns-brand:hover .ns-brand__logo--mark svg { transform: none; }
.ns-brand__name { font-size: 23px; letter-spacing: .01em; color: #123f30; line-height: 1; }
.ns-brand__tag { font-size: 9.5px; font-weight: 700; letter-spacing: .32em; color: #123f30; margin-top: 4px; }
.ns-brand--footer .ns-brand__logo--mark, .ns-brand--footer .ns-brand__logo--mark .ns-logo-mark { width: 40px; height: 40px; }
.ns-brand--footer .ns-brand__name { font-size: 21px; }
.ns-brand--footer .ns-brand__tag { display: block; }

/* ---------------------------------------------------------------------
   HEADER: núi thủy mặc bên trái, cành trúc góc phải
   --------------------------------------------------------------------- */
.ns-site { position: relative; }
.ns-header { background: rgba(255, 255, 255, .94); border-bottom-color: #f1ebdc; }
.ns-header::before { content: ""; position: absolute; left: 0; top: 0; width: 110px; height: 100%; background: url(../img/header-mountain.jpg) left top / auto 100% no-repeat; opacity: .9; pointer-events: none; mix-blend-mode: multiply; }
.ns-header__inner { height: 72px; position: relative; }
.ns-site__bamboo { position: absolute; right: 0; top: 0; width: 104px; height: 150px; background: url(../img/bamboo-corner.jpg) right top / 104px auto no-repeat; mix-blend-mode: multiply; pointer-events: none; z-index: 60; }
.admin-bar .ns-site__bamboo { top: 0; }
.ns-header__actions { margin-right: 56px; }
@media (max-width: 899px) { .ns-header__actions { margin-right: 40px; } .ns-site__bamboo { width: 70px; height: 100px; background-size: 70px auto; } }
.ns-nav > ul { gap: 48px; }
.ns-nav a { font-size: 16px; color: var(--ns-ink-light); }
.ns-nav .current-menu-item > a, .ns-nav .current_page_item > a, .ns-nav .current-menu-ancestor > a { color: var(--ns-jade); font-weight: 700; }
.ns-nav > ul > .current-menu-item > a::after, .ns-nav > ul > .current_page_item > a::after { background: var(--ns-jade-deep); bottom: -10px; }
.ns-header__login { font-size: 15.5px; color: var(--ns-ink); }
.ns-header__cta { border-radius: 22px; padding: 11px 18px; font-size: 13px; letter-spacing: .03em; }
@media (max-width: 1100px) { .ns-nav > ul { gap: 28px; } }
/* Hộp thành viên trên header: viên thuốc trắng như thiết kế */
.ns-member__btn { background: #fff !important; border: 1px solid var(--ns-border) !important; border-radius: 30px !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .03) !important; }
.ns-member__avatar { background: var(--ns-jade) !important; color: #fff !important; font-family: var(--ns-serif); }
.ns-member__name { color: var(--ns-jade) !important; font-weight: 700; }
.ns-member__plan { background: #f8dca8; color: #4a3410 !important; border-radius: 5px; padding: 1px 7px; }
.ns-member__plan.is-jade { background: var(--ns-mint); color: var(--ns-jade) !important; }
.ns-member__menu a.is-upgrade { color: var(--ns-jade) !important; }

/* ---------------------------------------------------------------------
   FOOTER: núi thủy mặc hai góc
   --------------------------------------------------------------------- */
.ns-footer { background: #fff; border-top: 1px solid #f0e2c6; overflow: hidden; padding: 36px 0 26px; }
.ns-footer::before, .ns-footer::after { content: ""; position: absolute; bottom: 0; pointer-events: none; mix-blend-mode: multiply; z-index: 0;
  -webkit-mask-image: linear-gradient(transparent, #000 35%); mask-image: linear-gradient(transparent, #000 35%); }
.ns-footer::before { left: 0; width: 160px; height: 120px; background: url(../img/footer-mountain-left.jpg) left bottom / auto 120px no-repeat; }
.ns-footer::after { right: 0; width: 260px; height: 120px; background: url(../img/footer-mountain-right.jpg) right bottom / auto 120px no-repeat; }
.ns-footer__inner { position: relative; z-index: 1; max-width: 1240px; }
.ns-footer__grid { margin-bottom: 26px; }
@media (min-width: 768px) { .ns-footer__grid { grid-template-columns: 1.25fr 1fr 1fr 1fr; } .ns-footer__brand { border-right: 2px solid #edd9b0; padding-right: 24px; } .ns-footer__col { padding-left: 40px; } }
.ns-footer__motto { font-size: 17px; font-weight: 700; color: var(--ns-ink); margin-top: 6px; }
.ns-footer__note { font-style: italic; font-size: 12.5px; color: var(--ns-ink-light); }
.ns-footer__col h4 { font-size: 16px; color: var(--ns-jade); }
.ns-footer__links a { font-size: 14.5px; color: var(--ns-ink-light); }
.ns-footer__bottom { font-size: 13px; color: var(--ns-ink-light); border-top-color: #e9e4d9; }
.ns-footer__status span { background: #21b07a; }

/* ---------------------------------------------------------------------
   THÀNH PHẦN CHUNG
   --------------------------------------------------------------------- */
.ns-eyebrow { color: var(--ns-gold); letter-spacing: .14em; font-weight: 700; }
.ns-h2 { font-weight: 500; color: #141a17; letter-spacing: -.01em; }
@media (min-width: 640px) { .ns-h2 { font-size: 44px; } }
.ns-site a.ns-link-underline { text-decoration: none !important; border-bottom: 1.5px solid var(--ns-jade-deep); padding-bottom: 2px; color: var(--ns-jade) !important; }
@keyframes ns-spin { to { transform: rotate(360deg); } }
@keyframes ns-glow { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* ---------------------------------------------------------------------
   TRANG CHỦ
   --------------------------------------------------------------------- */
.ns-hero { background: linear-gradient(#fbfbf8, #f7f7f2); padding: 56px 0 120px; }
@media (min-width: 768px) { .ns-hero { padding: 64px 0 130px; min-height: 600px; } }
.ns-hero__art { position: absolute; right: 0; top: 0; height: 100%; aspect-ratio: 906 / 766; max-width: 62%; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%); mask-image: linear-gradient(90deg, transparent 0, #000 16%); }
.ns-hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.ns-hero__disc { position: absolute; left: 18.21%; top: 8.22%; width: 61.37%; height: 72.58%; filter: drop-shadow(0 6px 18px rgba(80, 120, 100, .18)); }
.ns-hero__disc .spin { animation: ns-spin 60s linear infinite; }
.ns-hero__disc .spin-rev { animation: ns-spin 90s linear infinite reverse; }
.ns-hero__disc .twinkle { animation: ns-glow 3.5s ease-in-out infinite; }
.ns-hero__pine { position: absolute; left: 0; bottom: 0; width: 300px; height: 134px; background: url(../img/home-pine.jpg) left bottom / cover no-repeat; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent); mask-image: linear-gradient(90deg, #000 55%, transparent); }
.ns-hero__grid { grid-template-columns: 1fr !important; }
.ns-hero .ns-pill { background: none; border: 0; padding: 0; color: var(--ns-gold); font-weight: 700; letter-spacing: .16em; font-size: 14px; }
.ns-hero h1 { font-weight: 500; color: #141a17; letter-spacing: -1px; }
.ns-hero h1 span { color: #141a17; }
@media (min-width: 1024px) { .ns-hero h1 { font-size: 74px; line-height: 1.08; } }
.ns-hero__lead { color: #55605a; max-width: 470px; }
.ns-hero__actions { gap: 16px 40px; }
.ns-hero__actions .ns-btn { padding: 17px 30px; font-size: 18px; }
.ns-trust { margin-left: 28px; font-size: 14px; color: #55605a; }
.ns-trust svg { color: var(--ns-jade-deep); }
@media (max-width: 960px) { .ns-hero__art { max-width: none; width: 100%; opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ns-hero__disc .spin, .ns-hero__disc .spin-rev, .ns-hero__disc .twinkle { animation: none; } }

.ns-values { border: 0; border-top: 1px solid #ead9b8; border-radius: 0; box-shadow: none; background: transparent; padding: 30px 0 26px; }
.ns-value__icon { width: 58px; height: 58px; background: #fff; border: 1.5px solid #dbb77a; }
.ns-value__icon svg { width: 28px; height: 28px; color: var(--ns-jade); }
.ns-value h4 { font-weight: 500; font-size: 17px; }
.ns-value p { font-size: 13.5px; }

.ns-track { min-height: 200px; border-radius: 6px; border-color: #ece9e1; background: #fdfdfb; padding: 26px 28px; box-shadow: 0 2px 10px rgba(30, 40, 30, .04); transition: transform .25s, box-shadow .25s; }
.ns-track:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(30, 60, 45, .1); border-color: #ece9e1; }
.ns-track__num { font-size: 24px; font-weight: 400; color: var(--ns-gold); }
.ns-track h3 { font-size: 33px; font-weight: 500; }
.ns-track p { font-size: 15px; color: #55605a; }
.ns-track__go { padding-top: 16px; color: var(--ns-jade); }
.ns-track__art { top: 0; bottom: 0; width: 56%; height: auto; opacity: 1 !important; background-size: cover; background-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }

.ns-how { background: #f7f7f3; border: 0; border-radius: 0; margin: 0 calc(50% - 50vw); padding: 50px max(24px, calc(50vw - 600px)); }
.ns-mock { border-color: #ece9e1; border-radius: 8px; box-shadow: 0 10px 30px rgba(30, 40, 30, .07); }
.ns-mock__tabs { gap: 8px; padding: 16px 16px 0; border-bottom: 0; background: #fff; }
.ns-mock__tab { flex: 1; justify-content: center; border-radius: 6px; border-bottom: 0 !important; background: #f3f3ef; padding: 11px; }
.ns-mock__note { background: #f6f6f2; border: 0; color: var(--ns-ink-light); }
.ns-step__num { width: 40px; height: 40px; border: 1.5px solid #dbb77a; font-weight: 400; font-size: 16px; color: var(--ns-gold-soft); }
.ns-step h4 { font-weight: 500; font-size: 17px; }
.ns-step p { font-size: 14px; }

.ns-lib__head { border-bottom: 0; }
.ns-lib__head h2 { font-weight: 500; font-size: 44px; }
.ns-article { border-color: #ece9e1; border-radius: 8px; transition: transform .25s, box-shadow .25s; }
.ns-article:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(30, 60, 45, .1); }
.ns-article__media { height: auto; aspect-ratio: 248 / 122; border-bottom: 0; }
.ns-article__media img { object-fit: cover; }
.ns-article h3 { font-weight: 500; font-size: 22px; }
.ns-article__cat { color: var(--ns-gold); letter-spacing: .14em; }

.ns-cta { background: linear-gradient(90deg, #eceee8, #f0f2ed); border: 0; border-radius: 6px; padding: 26px 40px 26px 300px; min-height: 118px; }
.ns-cta__ink { width: 300px; opacity: 1; background: url(../img/cta-lotus-wide.jpg) left center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent); mask-image: linear-gradient(90deg, #000 60%, transparent); }
.ns-cta__ink svg { display: none; }
.ns-cta h3 { font-weight: 500; }
@media (max-width: 767px) { .ns-cta { padding: 150px 20px 24px; } .ns-cta__ink { width: 100%; height: 140px; bottom: auto; } }

.ns-faq details { border-radius: 4px; border-color: #e6e3da; }
.ns-faq summary { padding: 14px 22px; }
.ns-faq summary span:first-child { font-family: var(--ns-sans); font-weight: 400; font-size: 15.5px; }
.ns-faq summary span:last-child { color: var(--ns-jade-deep); }

/* ---------------------------------------------------------------------
   ĐĂNG NHẬP / ĐĂNG KÝ (trang + modal)
   --------------------------------------------------------------------- */
.ns-auth-brand__seal--mark { width: 50px; height: 50px; background: none !important; box-shadow: none !important; border-radius: 0; color: #123f30; }
.ns-auth-brand__seal--mark .ns-logo-mark { width: 48px; height: 48px; }
.ns-auth-brand h1, .ns-auth-brand h2 { font-size: 32px; letter-spacing: .01em; color: #123f30; }
.ns-auth-brand p { color: var(--ns-gold); letter-spacing: .28em; }
.ns-authpage { background: #fbfbf9; }
.ns-authpage__m1, .ns-authpage__m2 { position: absolute; pointer-events: none; mix-blend-mode: multiply; z-index: 0;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); }
.ns-authpage__m1 { left: -40px; top: 10px; width: 420px; height: 215px; background: url(../img/auth-mountain-left.jpg) center / 340px 175px no-repeat; }
.ns-authpage__m2 { right: -40px; top: 120px; width: 460px; height: 230px; background: url(../img/auth-mountain-right.jpg) center / 377px 190px no-repeat; }
@media (max-width: 760px) { .ns-authpage__m1, .ns-authpage__m2 { opacity: .5; } }
.ns-authpage__inner { position: relative; z-index: 1; }
.ns-authpage__card, .ns-modal__dialog { position: relative; border-radius: 12px; border-color: #ebe7de; box-shadow: 0 10px 30px rgba(40, 40, 30, .08); }
.ns-authpage__card::before, .ns-authpage__card::after, .ns-corner { content: ""; position: absolute; width: 14px; height: 14px; border: 1.5px solid #c9963a; pointer-events: none; }
.ns-authpage__card::before { left: 9px; top: 9px; border-right: 0; border-bottom: 0; }
.ns-authpage__card::after { right: 9px; top: 9px; border-left: 0; border-bottom: 0; }
.ns-corner--bl { left: 9px; bottom: 9px; border-right: 0; border-top: 0; }
.ns-corner--br { right: 9px; bottom: 9px; border-left: 0; border-top: 0; }

/* ---------------------------------------------------------------------
   BẢNG GIÁ
   --------------------------------------------------------------------- */
.ns-pricing { background: #fdfdfb; overflow: hidden; }
.ns-pricing::before { content: ""; position: absolute; left: 0; top: 0; width: 280px; height: 260px; background: url(../img/form-mountain-left.jpg) left top / cover; mix-blend-mode: multiply; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent); mask-image: linear-gradient(90deg, #000 60%, transparent); }
.ns-pricing__aura1, .ns-pricing__aura2 { display: none; }
.ns-pricing__inner { max-width: 1180px; }
.ns-pricing__pill { border: 1px solid #ead7ae; background: #fbf6ea; color: var(--ns-jade); padding: 6px 20px; font-size: 13px; letter-spacing: .16em; }
.ns-pricing__pill::before { content: "✦"; width: auto; height: auto; background: none; color: var(--ns-gold); }
.ns-pricing__pill::after { content: "✦"; color: var(--ns-gold); }
.ns-pricing__head h1 { font-weight: 700; color: #0f2e23; }
@media (min-width: 1024px) { .ns-pricing__head h1 { font-size: 56px; } }
.ns-plan { border-radius: 10px; border-color: #ebe7de; box-shadow: 0 2px 12px rgba(40, 40, 30, .05); transition: transform .25s, box-shadow .25s; }
.ns-plan:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(30, 60, 45, .12); border-color: #ebe7de; }
.ns-plan.is-featured { background: #fdf8ec; border: 2px solid #d9a441; box-shadow: 0 10px 30px rgba(190, 140, 50, .14); transform: none; }
.ns-plan__flag { background: var(--ns-grad); color: #fff; border-radius: 7px; box-shadow: var(--ns-grad-shadow); font-size: 11px; }
.ns-plan h3 { color: var(--ns-jade); }
.ns-plan__badge { font-size: 12.5px; border-radius: 6px; padding: 3px 9px; }
.ns-plan__badge.is-jade { background: var(--ns-mint); color: var(--ns-jade); }
.ns-plan__badge.is-gold { background: #f8e4bd; color: #7a520f; border: 0; font-weight: 500; }
.ns-plan__badge.is-purple { background: #f0e6f7; color: #7b3fa6; }
.ns-plan__desc { font-size: 13.5px; }
.ns-plan__now strong, .ns-plan__free strong { color: var(--ns-jade); }
.ns-plan__now span { color: var(--ns-jade); font-size: 22px; text-decoration: underline; text-underline-offset: 3px; }
.ns-plan__quota { color: var(--ns-jade-deep); font-weight: 700; font-size: 13.5px; }
.ns-plan__features { font-size: 13.5px; color: var(--ns-ink); }
.ns-plan__features .ns-star { color: #d4a24c; }
.ns-plan__btn { border-radius: 21px !important; font-size: 13.5px !important; padding: 12px 10px !important; white-space: nowrap; }
.ns-guarantees { border-top: 0; padding-top: 0; margin-top: 40px; text-align: left; }
.ns-guarantee { position: relative; flex-direction: row; align-items: flex-start; gap: 18px; padding: 22px 26px; border-radius: 12px; border-color: #ebe7de; }
.ns-guarantee::before, .ns-guarantee::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1.5px solid #c9963a; pointer-events: none; }
.ns-guarantee::before { left: 9px; top: 9px; border-right: 0; border-bottom: 0; }
.ns-guarantee::after { right: 9px; bottom: 9px; border-left: 0; border-top: 0; }
.ns-guarantee__icon, .ns-guarantee__icon.is-gold { width: 50px; height: 50px; flex: none; margin: 0; background: #f4f3ee; color: var(--ns-jade); border: 0; }
.ns-guarantee__icon svg { width: 26px; height: 26px; }
.ns-guarantee b { display: block; font-size: 18px; color: var(--ns-jade); }
.ns-guarantee span { font-size: 14px; color: var(--ns-ink-light); }
.ns-guarantee > div, .ns-guarantee > span:last-child { text-align: left; }
.ns-compare h2 { display: flex; align-items: center; gap: 30px; font-size: 34px; font-weight: 700; color: var(--ns-jade); }
.ns-compare h2::before, .ns-compare h2::after { content: ""; flex: 1; height: 1px; background: #e3c88f; }
.ns-compare__scroll { border-radius: 10px; border-color: #ebe7de; }
.ns-compare thead th { background: #f4f3ee; font-size: 17px; color: var(--ns-jade); }
.ns-compare thead th:not(:first-child) { text-align: center; }
.ns-compare tbody th { font-weight: 600; }
.ns-compare tbody tr:hover > * { background: #fbfaf6; }
.ns-compare .is-yes { color: var(--ns-jade-deep); }
.ns-compare__note, .ns-pricing__disclaimer { font-style: italic; color: var(--ns-ink-light); }
.ns-guarantee { display: grid; grid-template-columns: 50px 1fr; column-gap: 18px; row-gap: 2px; align-items: start; }
.ns-guarantee__icon { grid-row: 1 / span 2; }
.ns-guarantee b { margin: 0; }
.ns-site .ns-plan__btn, .ns-site .ns-abtn, .ns-site .ns-auth__submit, .ns-modal .ns-auth__submit, .ns-site .ns-cf-submit, .ns-site .ns-upsell__btn { box-sizing: border-box; max-width: 100%; }

/* ---------------------------------------------------------------------
   LẬP LÁ SỐ + KẾT QUẢ
   --------------------------------------------------------------------- */
.tuvi-app .ns-result { --r-primary: #0e4a31; --r-pc: #145a3c; --r-sec: #b07a1f; --r-sec-c: #f8e4bd; --r-on-sec-c: #5b3e0d; --r-sec-fixed: #f6dfae; --r-pf: #dcf3e2; --r-on-pf: #0b3d27; --r-s-low: #f7f6f2; --r-s: #f2f0ea; --r-s-high: #ebe8e0; }
.tuvi-app .ns-pill.is-active, .ns-site .ns-pill.is-active { background: var(--ns-grad) !important; color: #fff !important; box-shadow: var(--ns-grad-shadow); }
/* Nền núi thủy mặc góc trái phía trên form + kết quả */
.tuvi-template-app { position: relative; }
.tuvi-template-app::before { content: ""; position: absolute; left: 0; top: 0; width: 280px; height: 260px; background: url(../img/form-mountain-left.jpg) left top / cover; mix-blend-mode: multiply; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent); mask-image: linear-gradient(90deg, #000 55%, transparent); }
.tuvi-template-app > * { position: relative; z-index: 1; }
/* Lá số 12 cung vừa khung ở desktop (trước đây cột phải bị cắt, phải cuộn ngang) */
@media (min-width: 1180px) {
  .ns-rgrid { grid-template-columns: minmax(0, 1.68fr) minmax(0, 1fr) !important; gap: 20px; }
  .tuvi-app .chart-board { min-width: 0 !important; }
  .tuvi-app .chart-scroll { overflow-x: visible; }
  .tuvi-app .chart-board .palace { padding: 8px 8px 6px; }
  .tuvi-app .chart-board .palace-head { font-size: 11px; }
  .tuvi-app .chart-board .main-star { font-size: 15px; }
  .tuvi-app .chart-board .aux-columns, .tuvi-app .chart-board .annual-list { font-size: 10.5px; }
}
.tuvi-app .chart-scroll { border-color: #e3dccb; border-radius: 4px; box-shadow: none; }
.tuvi-app .chart-board .palace.selected { box-shadow: inset 0 0 0 2px var(--ns-jade) !important; background: #eef3ee !important; }
/* Khối mời mua gói: hình la bàn vàng xoay chậm thay vòng tròn tối */
.ns-upsell { background: linear-gradient(160deg, #1a5338, #123f2b 60%, #0f3825) !important; padding-top: 136px !important; }
.ns-upsell__glow { right: 0 !important; left: 0; top: 14px !important; width: auto !important; height: 120px !important; border-radius: 0 !important; background: url(../img/promo-compass.svg) center / contain no-repeat !important; }
.ns-upsell__badge { background: #f6dfae; color: #3b2a0a; }
.tuvi-app .ns-upsell h3 { font-size: 24px; line-height: 1.25; }
.tuvi-app .ns-upsell p { font-size: 13.5px; line-height: 1.55; }
.ns-upsell__price .ns-price { font-size: 26px; color: #fff; }
.ns-upsell > .ns-upsell__glow { position: absolute !important; }
.ns-upsell { padding-top: 146px !important; }
.ns-rbanner { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid #ece8de; }
.ns-rbanner__inner { padding-top: 34px; padding-bottom: 22px; }
.ns-rbanner__seal { width: 62px; height: 62px; border-radius: 50%; background: var(--ns-jade); color: #fff; }
.tuvi-app .ns-rbanner__name h1 { font-size: 24px; font-weight: 700; color: var(--ns-jade); }
.ns-rbanner__tag { background: #f8e4bd; color: #5b3e0d; }
.ns-rbanner__tag.is-than { background: var(--ns-jade); color: #fff; }
@media (min-width: 1024px) {
  .ns-rbanner__id { border-right-color: #e3c88f; }
  .ns-rbanner__facts { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 4px 26px; flex: 0 1 auto; }
}
.ns-rbanner__facts dt { color: var(--ns-gold-soft); }
.ns-toolbar { border: 1px solid #ebe7de; box-shadow: none; }
.ns-toolbar__label { color: var(--ns-gold-soft); }
.ns-upsell__price { white-space: nowrap; }
.ns-upsell__price .ns-price { font-size: 22px; }
.ns-site .ns-upsell__btn { white-space: nowrap; padding: 11px 18px !important; }

/* ---------------------------------------------------------------------
   GÓI NÂNG CAO: mục lục chương, lịch kỳ tháng, audio theo chương
   --------------------------------------------------------------------- */
.ns-adv-card { padding: 16px 16px 14px !important; }
.ns-adv-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ns-adv-card__head h3 { font-family: var(--ns-serif); font-size: 17px; font-weight: 700; color: var(--ns-jade-dark); margin: 0; }
.ns-adv-card__ico { display: inline-flex; color: var(--ns-jade); }
.ns-adv-card__ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.ns-adv-card__more { margin-left: auto; border: 0; background: none; font: 700 13px var(--ns-sans); color: var(--ns-jade); cursor: pointer; }
.ns-adv-chaps { display: grid; gap: 5px; }
.ns-adv-chap { border: 1px solid #ebe7de; border-radius: 7px; background: #fff; }
.ns-adv-chap[open] { background: #f1f5ef; border-color: #d7e5da; }
.ns-adv-chap summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 6px 12px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--ns-jade-dark); }
.ns-adv-chap summary::-webkit-details-marker { display: none; }
.ns-adv-chap__n { font-size: 12px; color: var(--ns-ink-light); min-width: 18px; }
.ns-adv-chap__t { flex: 1; }
.ns-adv-chap__c { font-size: 11px; font-weight: 500; color: var(--ns-muted); background: #f3f1ec; border-radius: 10px; padding: 1px 8px; }
.ns-adv-chap summary svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; transform: rotate(-90deg); transition: transform .25s; }
.ns-adv-chap[open] summary svg { transform: none; }
.ns-adv-chap__d { margin: 0; padding: 0 12px 6px 42px; font-size: 12px; font-style: italic; color: var(--ns-ink-light); }
.ns-adv-chap__tp { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 8px 42px; }
.ns-adv-chap__tp button { border: 1px solid #e3ded3; background: #fff; border-radius: 14px; padding: 3px 12px; font: 500 12px var(--ns-sans); cursor: pointer; color: var(--ns-ink); }
.ns-adv-chap__tp button:hover { border-color: #2a855b; color: var(--ns-jade); }
.ns-site .ns-adv-chap__go { margin: 0 12px 10px 42px; padding: 6px 14px; border-radius: 6px; font: 600 12.5px var(--ns-sans); cursor: pointer;
  background: var(--ns-grad) !important; color: #fff !important; border: 0; box-shadow: var(--ns-grad-shadow); }
.ns-adv-months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 4px 0 8px; }
.ns-adv-months button { border: 1px solid #e3ded3; background: #fff; border-radius: 6px; padding: 5px 0; font: 500 12.5px var(--ns-sans); cursor: pointer; color: var(--ns-ink); }
.ns-adv-months button:hover { border-color: #2a855b; }
.ns-site .ns-adv-months button.is-active { background: var(--ns-grad) !important; color: #fff !important; border-color: transparent; box-shadow: var(--ns-grad-shadow); }
.ns-adv-months__text { font-size: 12.5px; line-height: 1.55; color: var(--ns-ink-light); margin: 0; }
.ns-adv-months__text b { color: var(--ns-jade-dark); }
.ns-adv-months__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid #eee; padding-top: 8px; margin-top: 8px; font-size: 12px; color: var(--ns-ink-light); }
.ns-adv-months__foot button { border: 0; background: none; font: 700 12.5px var(--ns-sans); color: var(--ns-jade); cursor: pointer; }
.ns-adv-audio__sel { display: block; }
.ns-adv-audio__sel select { width: 100%; height: 36px; border: 1px solid #ddd8cd; border-radius: 7px; padding: 0 10px; font: 14px var(--ns-sans); background: #fff; color: var(--ns-ink); }
.ns-adv-audio__ctrl { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ns-adv-audio__skip { border: 0; background: none; cursor: pointer; font-size: 12px; color: var(--ns-ink); padding: 4px; }
.ns-site .ns-adv-audio__play { width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; font-size: 13px; background: var(--ns-grad) !important; color: #fff !important; box-shadow: var(--ns-grad-shadow); }
.ns-adv-audio__note { font-size: 12px; color: var(--ns-muted); }
/* Thanh thông báo kích hoạt: nền xanh nhạt như thiết kế */
.ns-successbar { background: #e6f2ea !important; color: var(--ns-jade-dark) !important; border: 1px solid #d3e8da; border-radius: 8px; margin: 14px auto 0; max-width: 1240px; }
.ns-successbar * { color: inherit; }
.ns-adv-chap--link { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 12px; cursor: pointer; font: 600 13.5px var(--ns-sans); color: var(--ns-jade-dark); text-align: left; }
.ns-adv-chap--link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; transform: rotate(-90deg); }
.ns-adv-audio__skip svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; }
.ns-adv-audio__play svg { width: 16px; height: 16px; fill: #fff; stroke: none; margin: auto; }

/* ---------------------------------------------------------------------
   KHU TÀI KHOẢN
   --------------------------------------------------------------------- */
.ns-account { --a-primary: #0e4a31; --a-primary-c: #145a3c; --a-sec: #b07a1f; --a-sec-c: #f8e4bd; --a-on-sec-c: #5b3e0d; --a-pf: #dcf3e2; --a-on-pf: #0e4a31; --a-surf: #fdfdfb; --a-low: #f6f2ea; }
/* WooCommerce mặc định thả nổi khung nội dung (68%) → cho chiếm hết cột */
.ns-acc .woocommerce-MyAccount-content { float: none !important; width: auto !important; }
.ns-acc .woocommerce-MyAccount-navigation { display: none; }
.ns-acc__side { background: #f6f2ea; border-right: 1px solid #f0ece3; box-shadow: none; }
.ns-acc__side-label { font-family: var(--ns-serif); font-size: 14.5px; white-space: nowrap; letter-spacing: .02em; color: var(--ns-jade-dark); text-transform: uppercase; }
.ns-acc__link.is-active { background: var(--ns-grad) !important; color: #fff !important; box-shadow: var(--ns-grad-shadow); }
.ns-acc__link.is-active * { color: #fff !important; }
.ns-acc__link.is-logout, .ns-acc__link.is-logout * { color: #d6362b !important; }
.ns-acc__plan { border: 1px solid #eee8dc; border-radius: 10px; box-shadow: 0 2px 10px rgba(30, 50, 40, .06); background: #fff; }
.ns-acc__plan a { color: var(--ns-jade) !important; font-weight: 700; }
.ns-acc__main { background: #fff; }
.ns-acc__content h1, .ns-acc__content h2 { color: var(--ns-jade); }

/* ---------------------------------------------------------------------
   THANH TOÁN
   --------------------------------------------------------------------- */
.ns-site .ns-co #payment #place_order, .ns-site .ns-co #payment #place_order:hover {
  background: var(--ns-grad) !important; color: #fff !important; box-shadow: var(--ns-grad-shadow) !important; border: 0 !important;
}
.ns-site .ns-co #payment #place_order:hover { background: var(--ns-grad-hover) !important; box-shadow: var(--ns-grad-shadow-hover) !important; }
/* Mô tả trường: chữ nhỏ thường (WooCommerce mặc định vẽ thành hộp xanh) */
.ns-co #customer_details .form-row .description { background: none !important; color: var(--ns-muted) !important; padding: 0 !important; box-shadow: none !important; position: static !important; }
.ns-co #customer_details .form-row .description::before { display: none !important; }
.ns-site .woocommerce-message, .ns-site .woocommerce-info { border-color: #d3e8da !important; }

/* Menu di động trượt từ phải (translateX 100%) không được tạo thanh cuộn ngang */
.ns-site { overflow-x: clip; }
@media (max-width: 1023px) {
  .ns-acc { grid-template-columns: minmax(0, 1fr); }
  .ns-acc__side, .ns-acc__main { min-width: 0; }
  .ns-acc__nav { overflow-x: auto; scrollbar-width: none; }
  .ns-acc__hero-card, .ns-hero-card { overflow: hidden; }
}

/* ---------------------------------------------------------------------
   SỬA: thẻ chọn gói trong khung "Kích hoạt bản đọc chi tiết"
   (lớp chữ trắng của nút gradient làm thẻ Cơ bản nền trắng mất chữ)
   --------------------------------------------------------------------- */
.ns-site .ns-locked__cta .ns-locked__plan:not(.is-featured),
.ns-site .ns-locked__cta .ns-locked__plan:not(.is-featured) * { color: var(--ns-jade-dark) !important; }
.ns-site .ns-locked__cta .ns-locked__plan:not(.is-featured) small { color: var(--ns-muted) !important; }
.ns-site .ns-locked__cta .ns-locked__plan:not(.is-featured) s { color: #9a9f9b !important; }
.ns-site .ns-locked__cta .ns-locked__plan { background: #fff; border: 1px solid rgba(255, 255, 255, .6); }
.ns-site .ns-locked__cta .ns-locked__plan.is-featured { background: rgba(0, 0, 0, .18); border-color: rgba(255, 255, 255, .25); }

/* ---------------------------------------------------------------------
   DANH SÁCH AUDIO trong bài luận: hàng giống danh sách phát của trình phát nổi
   --------------------------------------------------------------------- */
.tuvi-app #tuvi-audio-list .tuvi-track { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; padding: 10px; border-radius: 12px;
  background: linear-gradient(160deg, #1a5338, #123f2b 60%, #0f3825); }
.tuvi-app #tuvi-audio-list .tuvi-track > b { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #f6dfae; padding: 2px 4px 4px; }
.tuvi-app #tuvi-audio-list .tuvi-arows { display: flex; flex-direction: column; gap: 4px; }
.tuvi-app .tuvi-arow__btn { appearance: none; width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px;
  border: 1px solid transparent; background: transparent; color: #e6f7ee; text-align: left; cursor: pointer; font-family: var(--ns-sans); transition: background .15s, border-color .15s; }
.tuvi-app .tuvi-arow__btn:hover { background: rgba(255, 255, 255, .08); }
.tuvi-app .tuvi-arow__btn:focus-visible { outline: 2px solid #f6dfae; outline-offset: 1px; }
.tuvi-app .tuvi-arow__num { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #c1ecd4; font-size: 11.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tuvi-app .tuvi-arow__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tuvi-app .tuvi-arow__text strong { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.35; }
.tuvi-app .tuvi-arow__text small { font-size: 11px; color: #a9dbc0; }
.tuvi-app .tuvi-arow__tag { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #c1ecd4; flex-shrink: 0; white-space: nowrap; }
.tuvi-app .tuvi-arow__play { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--ns-grad-light); box-shadow: var(--ns-grad-shadow); }
.tuvi-app .tuvi-arow__play svg { width: 13px; height: 13px; fill: #fff; stroke: none; margin-left: 2px; }
.tuvi-app .tuvi-arow__btn:hover .tuvi-arow__play { filter: brightness(1.08); }
@media (max-width: 480px) { .tuvi-app .tuvi-arow__tag { display: none; } }
@media print { .tuvi-app #tuvi-audio-list { display: none !important; } }