/**
 * Cookie Consent - Mansion.vn
 * Version: 3.2.0
 * Nút theo độ dài chữ, cân xứng, sang trên mobile / tablet / desktop
 */

:root {
  --cc-bg: #ffffff;
  --cc-primary-color: #1a1a1a;
  --cc-secondary-color: #5e5e5e;

  --cc-btn-primary-bg: #f0a500;
  --cc-btn-primary-hover-bg: #d48f00;
  --cc-btn-primary-color: #ffffff;

  --cc-btn-secondary-bg: #f7f7f7;
  --cc-btn-secondary-hover-bg: #efefef;
  --cc-btn-secondary-color: #333333;

  --cc-toggle-on-bg: #f0a500;
  --cc-toggle-off-bg: #d4d4d4;

  --cc-overlay-bg: rgba(0, 0, 0, 0.5);
}

/* ===== Modal ===== */
#cc-main .cm {
  border-radius: 16px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14) !important;
  max-width: 560px !important;
  font-family: inherit !important;
  overflow: hidden !important;
}

#cc-main .cm__title {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #111 !important;
}

#cc-main .cm__desc {
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  color: #555 !important;
}

/* ===== Nút chung ===== */
#cc-main .cm__btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 12px 20px !important;
  min-height: 46px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
}

#cc-main .cm__btn:hover {
  transform: translateY(-1px) !important;
}

#cc-main .cm__btn--secondary {
  border: 1px solid #e5e5e5 !important;
  background: #f7f7f7 !important;
}

#cc-main .cm__btn--secondary:hover {
  background: #efefef !important;
  border-color: #ddd !important;
}

/* ===== Footer ===== */
#cc-main .cm__footer a {
  color: #f0a500 !important;
  text-decoration: underline !important;
  font-weight: 500 !important;
}

/* Căn giữa 2 link "Chính sách bảo mật" & "Điều khoản dịch vụ"
   để cân bằng, thay vì dồn về bên trái */
#cc-main .cm__links {
  justify-content: center !important;
  text-align: center !important;
}

#cc-main .cm__link-group {
  justify-content: center !important;
  width: auto !important;
}

/* =================================================
   DESKTOP + TABLET (≥ 769px)
   Nút theo chữ, cao đều, căn phải, khoảng cách đều
================================================= */
@media (min-width: 769px) {
  #cc-main .cm {
    max-width: 480px !important;
  }

  #cc-main .cm__btns {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 1rem 1.4rem 1.25rem !important;
  }

  /* Bỏ khung nhóm nút của thư viện để 3 nút coi như ngang hàng,
     nhờ đó justify-content: space-between ở trên mới dàn đều
     được cả 3 nút thay vì chỉ dàn 2 "cụm" nút */
  #cc-main .cm__btn-group {
    display: contents !important;
  }

  /* Vì display:contents ở trên, CSS gốc ".cm__btn + .cm__btn"
     (margin-top 6px, dùng cho layout xếp cột) vẫn dính vào nút
     đứng sau trong cùng 1 nhóm cũ -> làm nút đó thấp hơn 6px.
     Reset về 0 để 3 nút cao bằng nhau tuyệt đối. */
  #cc-main .cm__btn + .cm__btn {
    margin: 0 !important;
  }

  /* Quan trọng: để nút co theo chữ, không ép full width */
  #cc-main .cm__btn {
    width: auto !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
}

/* =================================================
   MOBILE (≤ 768px)
================================================= */
@media (max-width: 768px) {
  #cc-main .cm {
    max-width: calc(100% - 1.25rem) !important;
    border-radius: 14px !important;
  }

  #cc-main .cm__btns {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0.9rem 1.2rem 1.15rem !important;
  }

  #cc-main .cm__btn-group {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  #cc-main .cm__btn {
    width: 100% !important;
    flex: none !important;
  }
}

/* Tablet hẹp */
@media (min-width: 769px) and (max-width: 900px) {
  #cc-main .cm {
    max-width: 520px !important;
  }

  #cc-main .cm__btn {
    font-size: 13.5px !important;
    padding: 11px 16px !important;
  }
}

@media print {
  #cc-main { display: none !important; }
}