:root{
  --drxil-primary:#0b6d8f; /* chỉnh theo brand dibiz */
  --drxil-text:#0b1220;
  --drxil-muted:#5b6677;
  --drxil-border:rgba(11,18,32,.14);
  --drxil-bg:#ffffff;
  --drxil-soft:rgba(11,109,143,.08);
}

.drxil-pricing{ background:#fff; color:var(--drxil-text); padding-top: 100px;}
.drxil-container{ max-width:1180px; margin:0 auto; padding:0 18px; }

.drxil-hero{ padding:72px 0 28px; text-align:center; }
.drxil-hero__title{ margin:0 0 10px; font-weight:900; letter-spacing:-.02em; }
.drxil-hero__subtitle{ margin:0 auto; max-width:760px; color:var(--drxil-muted); }

.drxil-billing{ display:inline-flex; gap:8px; margin-top:18px; padding:6px; border:1px solid var(--drxil-border); border-radius:999px; }
.drxil-billing__btn{ background:transparent; border:0; padding:10px 14px; border-radius:999px; font-weight:800; cursor:pointer; }
.drxil-billing__btn.is-active{ background:var(--drxil-soft); color:var(--drxil-text); }

.drxil-section{ padding:48px 0; }
.drxil-section__head{ text-align:center; margin-bottom:18px; }
.drxil-section__title{ margin:0 0 6px; font-weight:900; }
.drxil-section__subtitle{ margin:0 auto; max-width:760px; color:var(--drxil-muted); }

.drxil-grid{ display:grid; gap:18px; }
.drxil-grid--4{ grid-template-columns:repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px){
  .drxil-grid--4{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .drxil-grid--4{ grid-template-columns:1fr; }
}

.drxil-card{
  background:var(--drxil-bg);
  border:2px solid var(--drxil-primary);
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  min-height:100%;
}

.drxil-card__head{ padding:18px; background:linear-gradient(0deg,#fff 0%, var(--drxil-soft) 100%); }
.drxil-card__tag{
  font-size:13px; font-weight:900; color:#fff;
  /*background:var(--drxil-primary);*/
  background: #0D173F;
  padding:10px 14px; border-radius:18px;
  display:inline-block; margin-bottom:14px;
}
.drxil-card__title{ margin:0 0 14px; font-weight:900; font-size:18px; line-height:1.25; }
.drxil-card__cta{ display:flex; gap:10px; flex-wrap:wrap; }

.drxil-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:999px;
  font-weight:900; font-size:13px; text-decoration:none !important;
  border:1px solid transparent;
  transition:transform .18s ease, opacity .18s ease, background .18s ease;
}
.drxil-btn--primary{ background:#4294d1; color:#fff; }
.drxil-btn--ghost{ background:#fff; color:#111; border-color:rgba(0,0,0,.25); }
.drxil-btn:hover{ transform:translateY(-1px); opacity:.93; }

.drxil-card__body{ padding:16px 18px 18px; flex:1; }
.drxil-card__label{ font-weight:900; margin:12px 0 8px; }
.drxil-list{ margin:0 0 8px 18px; color:var(--drxil-muted); }
.drxil-list li{ margin:6px 0; }

/* Compare */
.drxil-section--compare{ background:rgba(0,0,0,.015); }
.drxil-compare__tableWrap{
  overflow-x:auto;             /* chỉ scroll ngang */
  overflow-y:visible;          /* IMPORTANT: để sticky top theo body scroll */
  border:1px solid var(--drxil-border);
  border-radius:18px;
  background:#fff;
}
.drxil-compare__table{ width:100%; border-collapse:separate; border-spacing:0; min-width:860px; }
.drxil-compare__th, .drxil-compare__td{ padding:14px 14px; border-bottom:1px solid rgba(0,0,0,.06); vertical-align:middle; }
.drxil-compare__th{ background:rgba(0,0,0,.02); font-weight:900; }
.drxil-compare__td{ text-align:center; color:var(--drxil-text); }
.drxil-compare__td--sticky, .drxil-compare__th--sticky{
  position:sticky; left:0; z-index:2; text-align:left;
  background:#fff;
}
.drxil-compare__th--sticky{ background:rgba(0,0,0,.02); z-index:3; }

.drxil-compare__group td{
  padding:12px 14px;
  font-weight:900;
  color:var(--drxil-text);
  background:rgba(11,109,143,.08);
  border-bottom:1px solid rgba(0,0,0,.06);
  text-align:left;
}

/* Mobile accordion container (JS) */
.drxil-compare__mobile{ display:none; }
@media (max-width: 768px){
  .drxil-compare__tableWrap{ display:none; }
  .drxil-compare__mobile{ display:block; }
}

.drxil-acc{
  border:1px solid var(--drxil-border);
  border-radius:18px;
  background:#fff;
  overflow:hidden;
  margin-bottom:12px;
}
.drxil-acc__btn{
  width:100%;
  text-align:left;
  background:#fff;
  border:0;
  padding:14px 14px;
  font-weight:900;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.drxil-acc__panel{ padding:0 14px 14px; display:none; }
.drxil-acc.is-open .drxil-acc__panel{ display:block; }
.drxil-acc__row{ display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid rgba(0,0,0,.06); color:var(--drxil-muted); }
.drxil-acc__row strong{ color:var(--drxil-text); }


/* ===== PATCH: Widen layout for Pricing + Compare ===== */

.drxil-container{
  max-width: none;
}

/* 1) Pricing sections: gần full màn hình */
.drxil-pricing .drxil-section .drxil-container,
.drxil-pricing .drxil-hero .drxil-container{
  width: min(98vw, 1720px);   /* gần full, vẫn có giới hạn cho màn siêu lớn */
  max-width: 1720px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* 2) Grid 4 cột: nới card rộng hơn */
.drxil-pricing .drxil-grid{
  gap: 26px;
}

.drxil-pricing .drxil-grid--4{
  grid-template-columns: repeat(4, minmax(280px, 1fr));
  align-items: stretch;
}

/* Breakpoints hợp lý để không ép hẹp */
@media (max-width: 1366px){
  .drxil-pricing .drxil-grid--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .drxil-pricing .drxil-grid--4{ grid-template-columns: 1fr; }
}

/* 3) Card padding tăng chút cho “premium” */
.drxil-pricing .drxil-card__head{ padding: 22px; }
.drxil-pricing .drxil-card__body{ padding: 18px 22px 22px; }

/* 4) FIX: 2 nút CTA cân bằng (2 cột, mỗi nút 50%) */
.drxil-pricing .drxil-card__cta{
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;            /* ép cùng 1 hàng */
}

.drxil-pricing .drxil-card__cta .drxil-btn{
  flex: 1 1 0;
  width: 50%;
  min-width: 0;
  padding: 10px 0;              /* đồng đều */
}

/* Mobile: nếu quá chật thì xuống 2 hàng */
@media (max-width: 420px){
  .drxil-pricing .drxil-card__cta{
    flex-wrap: wrap;
  }
  .drxil-pricing .drxil-card__cta .drxil-btn{
    width: 100%;
    flex: 1 1 100%;
  }
}

/* 5) Compare Features: 80% screen theo yêu cầu */

/* Table rộng hơn + cell thoáng */
.drxil-pricing .drxil-compare__table{
  min-width: 1100px;
}

.drxil-pricing .drxil-compare__th,
.drxil-pricing .drxil-compare__td{
  padding: 16px 18px;
  font-size: 14px;
}

/* Cột Features rộng hơn để không gãy chữ */
.drxil-pricing .drxil-compare__td--sticky,
.drxil-pricing .drxil-compare__th--sticky{
  min-width: 320px;
}

/* 6) Hero spacing nhẹ lại */
.drxil-pricing .drxil-hero{
  padding: 64px 0 26px;
}


/* ===== Mobile priority improvements ===== */
@media (max-width: 640px){

  /* Container full width hơn trên mobile */
  .drxil-pricing .drxil-section .drxil-container,
  .drxil-pricing .drxil-hero .drxil-container{
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Hero gọn lại */
  .drxil-hero{ padding: 40px 0 16px; }
  .drxil-hero__title{ font-size: 26px; line-height: 1.15; }
  .drxil-hero__subtitle{ font-size: 13px; line-height: 1.45; }

  /* Cards: bớt “cao” và dễ đọc */
  .drxil-card{ border-radius: 20px; }
  .drxil-card__tag{ font-size: 12px; padding: 8px 12px; border-radius: 14px; }
  .drxil-card__title{ font-size: 16px; margin-bottom: 10px; }

  /* CTA: 2 nút full width stacked để cân & dễ tap */
  .drxil-card__cta{
    flex-wrap: wrap !important;
    gap: 10px;
  }
  .drxil-card__cta .drxil-btn{
    width: 100% !important;
    flex: 1 1 100% !important;
    padding: 12px 0;
    font-size: 14px;
  }

  /* List text nhỏ hơn chút để đỡ dài */
  .drxil-list{ margin-left: 16px; }
  .drxil-list li{ font-size: 13px; line-height: 1.35; }

  /* Section spacing */
  .drxil-section{ padding: 28px 0; }
}

/* ===== Compare Features visibility rules ===== */
/* Desktop: show table, hide accordion */
.drxil-compare__tableWrap{ display:block; }
.drxil-compare__mobile{ display:none; }

/* Mobile: hide table, show accordion */
@media (max-width: 768px){
  .drxil-compare__tableWrap{ display:none !important; }
  .drxil-compare__mobile{ display:block !important; }
}

/* Accordion look nicer on mobile */
@media (max-width: 768px){
  .drxil-acc{ border-radius: 16px; }
  .drxil-acc__btn{ padding: 14px; font-size: 14px; }
  .drxil-acc__panel{ padding: 0 14px 14px; }
  .drxil-acc__row{ font-size: 13px; }
}



/* JS Fixed THEAD fallback */
.drxil-compare__fixedHead{
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9999;
  display: none;
  pointer-events: none; /* không chặn click */
}

.drxil-compare__fixedHead .drxil-compare__fixedInner{
  margin: 0 auto;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  background: #fff;
}

.drxil-compare__fixedHead table{
  margin: 0;
}