/*----------------------------------------
  Tapi — teal/mint accent (gốc #53F1D5, dùng bản đậm hơn)
  Ghi đè accent gradient tím/xanh của theme.
  Load SAU main.css, ở các trang Tapi: index-tapi.html, blog-list-tapi.html.
----------------------------------------*/
:root {
  --tapi-accent: #2BDFB9;
  --tapi-accent-deep: #0FA98C;
  --tapi-ink: #06231D;

  /* Toàn trang dùng Inter — ghi đè các font display của theme
     (file này chỉ load ở các trang Tapi nên không ảnh hưởng trang khác) */
  --tp-ff-phudu: 'Inter', sans-serif;
  --tp-ff-teko: 'Inter', sans-serif;
  --tp-ff-grotesk: 'Inter', sans-serif;
  --tp-ff-heading: 'Inter', sans-serif;
  --tp-ff-body: 'Inter', sans-serif;
  --tp-ff-p: 'Inter', sans-serif;
}

/* Heading Inter viết hoa: nới tracking (theme gốc set -2px cho Phudu,
   quá sát với Inter) và tăng line-height cho thoáng */
.tp-section-title-phudu,
.app-stack-title,
.app-stack-number,
.crp-price-head h4 {
  letter-spacing: 0.01em;
  font-weight: 800;
}
.tp-section-title-phudu {
  /* 90% cỡ gốc theme (94px) + line-height nới hơn nữa để dấu tiếng Việt
     (vd Ô, Ầ) không bị chạm dòng trên */
  font-size: 85px;
  line-height: 1.3;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) {
  .tp-section-title-phudu {
    font-size: 68px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-section-title-phudu {
    font-size: 59px;
  }
}
@media (max-width: 767px) {
  .tp-section-title-phudu {
    font-size: 45px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-section-title-phudu {
    font-size: 54px;
  }
}
.tp-section-title-phudu.fs-70 {
  line-height: 1.25;
}
.app-stack-title {
  line-height: 1.4;
}
/* CTA chính ở hero: giữ nguyên 1 dòng, không co lại trong flex row */
.app-hero-btn .tp-btn-gradient {
  white-space: nowrap;
  flex-shrink: 0;
}
/* shape-1 / shape-2 trong section app stack to hơn 20%.
   Dùng width thay vì scale: scale kéo giãn texture đã cache trên GPU layer
   của Atropos nên ảnh bị mờ; width buộc browser rasterize đúng kích thước.
   Offset top/left/right bù lại để giữ vị trí tương đương bản scale từ tâm.
   Chỉ áp ở desktop — dưới 1200px trả về size gốc của theme (vẫn nét). */
@media (min-width: 1200px) {
  .app-stack-thumb-box .shape-1,
  .app-stack-thumb-box .shape-2 {
    width: 120%;
    max-width: none;
  }
  .app-stack-thumb-box .shape-1 {
    top: 62px;
    left: calc(-25px - 10%);
  }
  .app-stack-thumb-box .shape-2 {
    top: -108px;
    right: -10%;
  }
}

/* badge lộ trình tích hợp (section stack 03) — viền đứt = "sắp có" */
.tapi-roadmap-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 25px;
}
.tapi-roadmap-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1px dashed rgba(43, 223, 185, 0.5);
  border-radius: 30px;
  color: #A5F3E3;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.tapi-roadmap-note {
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  font-style: italic;
}
/* biến thể section 03 không ảnh: mọi thứ căn giữa, tắt kẻ trang trí của theme */
.tapi-roadmap-solo .app-stack-content {
  margin-left: 0;
}
.tapi-roadmap-solo .app-stack-content::before,
.tapi-roadmap-solo .app-stack-content::after {
  display: none;
}
.tapi-roadmap-solo .tapi-roadmap-badges {
  justify-content: center;
  gap: 14px;
  margin-top: 35px;
}
.tapi-roadmap-solo .tapi-roadmap-badge {
  font-size: 17px;
  padding: 12px 26px;
}
.tapi-roadmap-solo .tapi-roadmap-note {
  display: block;
  margin-top: 14px;
}
/* panel 03 không còn ảnh nên thấp hơn viewport khi bị pin (top 0%):
   kéo cao đủ màn hình + căn giữa dọc để không hụt đáy */
@media (min-width: 1199px) {
  .app-stack-item.app-stack-item-03 {
    display: flex;
    align-items: center;
    min-height: 100vh;
  }
  .app-stack-item-03 .app-stack-warpper {
    width: 100%;
  }
}

/* nav link đang active theo section (scrollspy trong tapi-landing.js) */
.tp-header-10-menu nav ul li a.active {
  color: var(--tapi-accent);
}

/* nút gradient chính (hero, header, footer) */
.tp-btn-gradient {
  background: linear-gradient(230deg, #2BDFB9 6.7%, #14BA98 52%, #0A8A72 91%);
  color: #fff;
}
.tp-btn-gradient:hover {
  color: #fff;
}

/* headline gradient ở khối stats */
.app-review-title {
  background: linear-gradient(293deg, #CFFAF0 -3.2%, #2BDFB9 48.62%, #0FA98C 102.56%);
  background-clip: text;
  -webkit-background-clip: text;
}

/* card bảng giá đang nổi bật — tint ấm */
/* ====== bảng giá (redesign): 3 card rời trên nền tối, gói Home nhấn màu accent ====== */
.agntix-dark .app-price-box {
  background: transparent;
  padding: 0;
}
.agntix-dark .app-price-box .row {
  row-gap: 30px;
}
.agntix-dark .app-price-box .row [class*=col-]:not(:last-child) {
  border-right: none;
}
.agntix-dark .app-price-box .crp-price-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background: #17181B;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.agntix-dark .app-price-box .crp-price-item:hover {
  border-color: rgba(43, 223, 185, 0.35);
  transform: translateY(-6px);
}
/* nút luôn dính đáy card để 3 cột đều nhau */
.agntix-dark .app-price-box .crp-price-item .app-price-btn-box {
  margin-top: auto;
}
/* dòng tính năng: icon check không đè lên text khi xuống dòng */
.agntix-dark .app-price-box .crp-price-list ul li {
  display: flex;
  align-items: flex-start;
  line-height: 1.45;
}
.agntix-dark .app-price-box .crp-price-list ul li span {
  flex-shrink: 0;
  margin-top: 2px;
}
/* gói active (Home): viền + nền ám màu accent */
.agntix-dark .app-price-box .crp-price-item.active {
  position: relative;
  background: linear-gradient(160deg, rgba(43, 223, 185, 0.16) 0%, rgba(15, 169, 140, 0.05) 55%, #17181B 100%);
  border-color: rgba(43, 223, 185, 0.45);
}
.agntix-dark .app-price-box .crp-price-item.active .crp-price-head span {
  color: #A5F3E3;
  border-color: rgba(43, 223, 185, 0.4);
}
/* cờ "Phổ biến nhất" góc phải card active */
.tapi-price-flag {
  position: absolute;
  top: 28px;
  right: 28px;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tapi-ink, #21212D);
  background: linear-gradient(230deg, #53F1D5 6.7%, #21D8B4 52%, #0FA98C 91%);
}

/* h4 giá trong card pricing: theme gốc set 70px cho con số,
   text "Liên hệ" dài hơn nên thu nhỏ lại */
.app-price-box .crp-price-head h4 {
  font-size: 44px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .app-price-box .crp-price-head h4 {
    font-size: 38px;
  }
}
@media (max-width: 767px) {
  .app-price-box .crp-price-head h4 {
    font-size: 34px;
  }
}

/* quầng sáng ấm dưới hero — gợi ánh đèn */
.app-hero-area::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 70%;
  height: 320px;
  background: radial-gradient(50% 50% at 50% 100%, rgba(43, 223, 185, 0.16) 0%, rgba(43, 223, 185, 0) 100%);
  pointer-events: none;
  z-index: -1;
}

/* ảnh tay cầm điện thoại ở hero — khóa kích thước hiển thị 871px
   để thay file ảnh khác độ phân giải không làm xô lệch các shape neo absolute */
.app-hero-bottom-thumb-main > img:first-child {
  width: 871px;
  height: auto;
}
@media (max-width: 767px) {
  .app-hero-bottom-thumb-main > img:first-child {
    width: 100%;
    max-width: 871px;
  }
}

/* logo wordmark "tapi." — header, offcanvas, footer */
.tapi-logo {
  display: inline-block;
  font-family: var(--tp-ff-phudu), sans-serif;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--tp-common-white, #fff);
}
.tapi-logo span {
  color: var(--tapi-accent);
}
a:hover .tapi-logo {
  color: var(--tp-common-white, #fff);
}

/* panel điều khiển nhanh trong hero — mô phỏng cảm giác dùng Tapi */
.tapi-scene-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 18px;
}
.tapi-scene-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.3s;
}
.tapi-scene-chip i {
  color: var(--tapi-accent);
  font-size: 14px;
}
.tapi-scene-chip:hover {
  border-color: rgba(43, 223, 185, 0.5);
  background: rgba(43, 223, 185, 0.08);
}
.tapi-scene-chip.is-on {
  background: linear-gradient(230deg, #53F1D5, #19C7A4);
  border-color: transparent;
  color: var(--tapi-ink);
}
.tapi-scene-chip.is-on i {
  color: var(--tapi-ink);
}
.tapi-status-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.tapi-status-line span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
}
.tapi-status-line i {
  color: var(--tapi-accent);
  font-size: 13px;
}

/* hoạt cảnh scene: glow theo scene + trạng thái đổi tuần tự */
.tapi-quick-panel {
  position: relative;
}
.tapi-quick-panel::before {
  content: "";
  position: absolute;
  inset: -40px -60px -30px -50px;
  background: radial-gradient(60% 80% at 25% 50%, var(--tapi-scene-glow, rgba(43, 223, 185, 0.16)) 0%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}
.tapi-status-line span {
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.tapi-status-line span.is-updating {
  opacity: 0;
  transform: translateY(7px);
}
@keyframes tapiChipPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(43, 223, 185, 0.5);
  }
  100% {
    box-shadow: 0 0 0 16px rgba(43, 223, 185, 0);
  }
}
.tapi-scene-chip.is-pressed {
  animation: tapiChipPulse 0.65s ease-out;
}
.tapi-scene-chip:active {
  transform: scale(0.96);
}

/* band "Vì sao chọn Tapi": panel glass tối + grid stat tile */
.tapi-band {
  position: relative;
  overflow: hidden;
  padding: 56px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(135deg, #17181d 0%, #101114 100%);
}
.tapi-band::before {
  content: "";
  position: absolute;
  top: -120px;
  left: -80px;
  width: 420px;
  height: 420px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(43, 223, 185, 0.13) 0%, transparent 100%);
  pointer-events: none;
}
.tapi-band-eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tapi-accent);
}
.tapi-band-title {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
  margin-bottom: 14px;
}
.tapi-band-heading > p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0;
}
.tapi-band-heading > p span {
  color: var(--tapi-accent);
  font-weight: 600;
}
@media (max-width: 991px) {
  .tapi-band {
    padding: 36px 28px;
  }
  .tapi-band-heading {
    margin-bottom: 30px;
  }
}
.tapi-band-tile {
  height: 100%;
  padding: 26px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.04);
  transition: 0.35s;
}
.tapi-band-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(43, 223, 185, 0.35);
  background: rgba(43, 223, 185, 0.05);
}
.tapi-band-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: rgba(43, 223, 185, 0.12);
}
.tapi-band-tile-icon i {
  font-size: 18px;
  color: var(--tapi-accent);
}
.tapi-band-tile h5 {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.tapi-band-tile p {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0;
}

/* logo Casambi nổi trong hero (thay ảnh "Secure Payment" của theme) */
.tapi-secure-pill {
  display: inline-flex;
  align-items: center;
}
.tapi-secure-pill img {
  height: 50px;
  width: auto;
  object-fit: contain;
}
/* text mô tả cạnh nút hero — tăng độ nổi (gốc: trắng 60%, 16px) */
.agntix-dark .app-hero-btn-text p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
}

/* highlight tên giao thức trong text
   (màu phẳng, không dùng background-clip vì tp_text_anim/SplitText phá nó) */
.tapi-text-highlight {
  font-weight: 700;
  color: var(--tapi-accent);
}

/* logo KNX (shape-3) trong hero — file gốc 1069x510 nên phải chặn theo width */
.app-hero-bottom-thumb-main .shape-3 {
  max-width: 240px;
  height: auto;
}

/* badge giao thức (KNX, Casambi, DALI-2, Matter, Modbus, BACnet) */
.tapi-proto-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  border: 1px solid rgba(43, 223, 185, 0.35);
  border-radius: 40px;
  color: #A5F3E3;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.tapi-proto-badge.lg {
  font-size: 22px;
  padding: 12px 28px;
}

/* marquee badge: fade hai mép thay vì cắt cứng */
.app-brand-active {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

/* ====== blog list (blog-list-tapi.html): đổi accent xanh lá #D0FF71 của theme sang teal ====== */
.tp-blog-heading-wrap .tp-section-subtitle.pre::before {
  background: var(--tapi-accent);
}
.tp-blog-list-item-meta {
  color: var(--tapi-accent);
  border-color: rgba(43, 223, 185, 0.25);
}
.basic-pagination ul li .current {
  border-color: var(--tapi-accent);
  background-color: var(--tapi-accent);
  color: var(--tapi-ink);
}

/* CTA store box chuyển từ div sang thẻ a — hai nút chia đều, cân đối */
.app-cta-store-box {
  gap: 16px;
}
a.app-cta-store {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 1 1 0;
  min-width: 0;
  max-width: 300px;
  width: auto;
  padding: 14px 22px;
}
a.app-cta-store .app-cta-store-icon i {
  font-size: 28px;
  color: var(--tapi-accent);
  margin-right: 14px;
}
a.app-cta-store .app-cta-store-content p {
  font-size: 13px;
  white-space: nowrap;
}
a.app-cta-store .app-cta-store-content span {
  font-size: 18px;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .app-cta-store-box {
    flex-direction: column;
    align-items: stretch;
  }
  a.app-cta-store {
    max-width: 100%;
    margin-bottom: 0;
    justify-content: flex-start;
  }
}

/* ── Language switcher (header + offcanvas) ─────────────────────── */
.tapi-lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
}
.tapi-lang-switch a {
  color: rgba(255, 255, 255, 0.5);
  padding: 10px 4px;
  transition: color 0.2s;
}
.tapi-lang-switch a:hover,
.tapi-lang-switch a.active {
  color: #fff;
}
.tapi-lang-switch span {
  color: rgba(255, 255, 255, 0.3);
}
.tapi-lang-switch.offcanvas-lang {
  margin-top: 30px;
}

/* ── Blog detail: chữ & rich content trên nền tối ───────────────── */
/* Theme gốc style .tp-career-details-* cho nền sáng (#111013) → override cho dark */

.tp-career-details-subtitle {
  color: #2bdfb9;
}
.tp-career-details-title,
.tp-career-details-title-2 {
  color: #fff;
}
.tp-career-details-info-item span {
  color: rgba(255, 255, 255, 0.55);
}
.tp-career-details-info-item h5 {
  color: #fff;
}

/* Nội dung bài viết (HTML inject từ rich editor) */
.tp-career-details-wrap {
  color: rgba(255, 255, 255, 0.78);
}
.tp-career-details-wrap p {
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 18px;
}
.tp-career-details-wrap h2,
.tp-career-details-wrap h3,
.tp-career-details-wrap h4,
.tp-career-details-wrap h5,
.tp-career-details-wrap h6 {
  color: #fff;
  margin: 34px 0 16px;
  line-height: 1.3;
}
.tp-career-details-wrap h2 { font-size: 28px; }
.tp-career-details-wrap h3 { font-size: 22px; }
.tp-career-details-wrap h4 { font-size: 19px; }
.tp-career-details-wrap ul,
.tp-career-details-wrap ol {
  padding-left: 24px;
  margin-bottom: 20px;
}
.tp-career-details-wrap ul { list-style: disc; }
.tp-career-details-wrap ol { list-style: decimal; }
.tp-career-details-wrap ul li,
.tp-career-details-wrap ol li {
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 10px;
  line-height: 1.6;
}
.tp-career-details-wrap li::marker {
  color: #2bdfb9;
}
.tp-career-details-wrap a {
  color: #2bdfb9;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tp-career-details-wrap a:hover {
  color: #53f1d5;
}
.tp-career-details-wrap blockquote {
  margin: 26px 0;
  padding: 18px 24px;
  border-left: 3px solid #2bdfb9;
  border-radius: 0 12px 12px 0;
  background: rgba(43, 223, 185, 0.07);
}
.tp-career-details-wrap blockquote p {
  color: rgba(255, 255, 255, 0.85);
  font-style: italic;
  margin-bottom: 0;
}
.tp-career-details-wrap img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  margin: 24px 0;
}
.tp-career-details-wrap strong,
.tp-career-details-wrap b {
  color: #fff;
}
.tp-career-details-wrap code {
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #53f1d5;
  font-size: 0.9em;
}
.tp-career-details-wrap pre {
  padding: 18px 20px;
  border-radius: 12px;
  background: #101114;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow-x: auto;
  margin: 24px 0;
}
.tp-career-details-wrap pre code {
  background: none;
  padding: 0;
}
.tp-career-details-wrap table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 15px;
}
.tp-career-details-wrap table th,
.tp-career-details-wrap table td {
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.78);
  text-align: left;
}
.tp-career-details-wrap table th {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-weight: 600;
}
.tp-career-details-wrap hr {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 30px 0;
}

/* Tag pill dưới bài viết */
.tp-career-details-wrapper .tp-blog-list-item-meta {
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
  padding: 5px 14px;
  display: inline-block;
  margin: 0 8px 8px 0;
  font-size: 14px;
}