:root{
  --brand-main: #11a27f;
  --brand-cta: #0b7a5f;   /* WCAG PASS */
  --brand-cta-hover: #095f4a;
}

.header {
    background-color: #fff;
    background-image: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.header > .container > .d-flex{
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding-right: 16px;
    padding-left: 16px;
    padding-top: 0;
    padding-bottom: 0;
    margin-right: auto;
    margin-left: auto;
}
.footermenu {
    margin-top: 16px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.footermenu li {
    line-height: 1;
    padding: 0 10px;
    border-right: 1px solid;
}
.site-logo {
    display: block;
    height: 64px;
    line-height: 64px;
}
.site-logo img {
    width: 46px;
}
.navbar-menu {
    flex: 2;
    text-align: center;
}
.navbar-search {
    flex: 1;
    text-align: right;
}
.extension-box{margin-bottom: 30px;overflow: hidden;transition: .4s ease-out;padding: 30px;}
.extension-box .extension-name{font-size: 30px;margin-bottom: 14px;}
.extension-box .extension-tagline{font-weight: 500;font-size: 20px;line-height: 32px;color: #405261;}
.extension-box .extension-short-description{font-size: 16px;line-height: 28px;color: rgba(9, 30, 66, .7);margin-top:24px;margin-bottom:24px;}
.extension-box .extension-actions{box-sizing: border-box;}
.extension-box .extension-actions .buy-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  border-radius: 6px;
  background: var(--brand-cta);
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
}
.extension-box .extension-actions > div{
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.extension-box .extension-actions .preview-btn,
.extension-box .extension-actions .download-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: 6px;
  border: 2px solid;
  border-color: var(--brand-cta);
  color: var(--brand-cta);
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  background: #fff;
}
.btn-premium{
    border: 2px solid;
    background: var(--brand-cta);
    border-color: var(--brand-cta);
    padding: 15px 30px;
    display: inline-block;
    border-radius: 6px;
    color: #fff;
    font-weight: 500;
    text-decoration: none;
}
.btn-premium:hover{
  filter: brightness(0.95);
  color: #fff;
}
a.contact-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: 6px;
  border: 2px solid #11a27f;
  color: #11a27f;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  background: #fff;
  padding: 0 20px;
}
.extension-box .extension-actions .preview-btn span,
.extension-box .extension-actions .download-btn span,
.contact-btn span{
  display: inline-flex;
  width: 18px;
  height: 18px;
  margin-left: 10px;
}
.extension-box .extension-actions .preview-btn:hover,
.extension-box .extension-actions .download-btn:hover,
.contact-btn:hover{
  background: rgba(10,44,255,.06);
}
.extension-box .extension-actions .buy-btn:hover{
  filter: brightness(0.95);
}

.extension-hero{padding: 80px 0;}
.frequently-asked-questions, .testimonials, .steps, .item-features, .video-demo{padding: 80px 0;}
.gray-bg{background-color: #eef0f3;padding-bottom: 80px;}
.footer{padding: 30px 0; text-align: center;}


.faq-subform .accordion-button { font-weight: 600; }
.faq-subform .accordion-body { line-height: 1.7; }
.faq-subform .accordion-item { border-radius: .75rem; overflow: hidden; margin-bottom: 14px;}

.max-w-4xl {
    max-width: 896px;
}
.mb-16 {
    margin-bottom: 64px;
}

.meta-info{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  margin-top:16px;
  margin-bottom: 16px;
}

.meta-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 8px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  background:#f9fafb;
}

.meta-icon{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:10px;
  background:#ecfeff;
  color:#0f766e;
}

.meta-icon svg{
  width:18px;
  height:18px;
}

.meta-text{
  display:flex;
  flex-direction:column;
}

.meta-value{
  font-size:14px;
  font-weight:700;
  color:#111827;
}

.meta-label{
  font-size:12px;
  color:#6b7280;
}

/* hover nhẹ cho xịn */
.meta-item:hover{
  background:#f3f4f6;
}

/* mobile gọn */
@media (max-width:480px){
  .meta-item{
    width:100%;
  }
}

.video-demo .youtube-embed{
    border: 32px solid #e5e7eb;
    border-radius: 26px;
}

.support{
    padding: 80px 0;  
}
.support-card{
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 16px;
    padding: 30px;
}
.support-icon{
    font-size: 36px;
    margin-bottom: 16px;
}
.support-title{
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 16px;
    line-height: 1;
}
.support-desc{
    margin-bottom: 24px;
    color: #091e42b3;
}
.premium-label{
    text-align: center;
    margin-bottom: 16px;
    color: #091e42b3;
}
.premium-text{
    margin-bottom: 16px;
    text-align: center;
    font-size: x-large;
}
.feature-card{
  display:flex;
  gap:16px;
  padding:28px 20px;
  border-radius:14px;
  background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.03),0 8px 24px rgba(0,0,0,.06);
}
.feature-card__icon{
  width:44px;
  height:44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.04);
  flex:0 0 auto;
  font-size:22px;
  line-height:1;
}
.feature-card__title{
  margin:0 0 6px 0;
  font-size:18px;
  line-height:1.2;
}
.feature-card__desc{
  font-size:14px;
  line-height:1.45;
  opacity:.85;
}


.testimonial-card{
  padding:18px 20px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.03),0 8px 24px rgba(0,0,0,.06);
  height:100%;
  display:flex;
  flex-direction:column;
}

.stars{
  font-size:16px;
  margin-bottom:10px;
  line-height:1;
}

.testimonial-message{
  font-size:14px;
  line-height:1.6;
  color:rgba(0,0,0,.75);
  margin-bottom:18px;
  flex:1 1 auto;
}

.testimonial-info{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:auto;
}

.avatar-circle{
  width:44px;
  height:44px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:16px;
  color:rgba(0,0,0,.75);
  flex:0 0 auto;
  text-transform:uppercase;
}

.testimonial-meta{
  min-width:0;
}

.testimonial-name{
  margin:0;
  font-size:16px;
  font-weight:800;
  line-height:1.2;
}

.testimonial-position{
  margin-top:2px;
  font-size:13px;
  color:rgba(0,0,0,.55);
  line-height:1.3;
}