/* ===== Hỗ trợ VMAX - Support Page Styles ===== */
.page-support { color: #333333; background: #FFFFFF; max-width: 100%; overflow-x: hidden; }

/* ---------- 1. Hero Section ---------- */
.page-support__hero-section { padding: 10px 16px; max-width: 1200px; margin: 0 auto; box-sizing: border-box; }

.page-support__hero-image-wrapper { width: 100%; }

.page-support__hero-image { display: block; width: 100%; aspect-ratio: 17 / 5; object-fit: cover; border-radius: 14px; height: auto; }

.page-support__hero-content { text-align: center; padding: 8px 12px 0; }

.page-support__main-title { font-weight: 700; line-height: 1.3; letter-spacing: 0.02em; margin: 10px 0; max-width: 900px; margin-left: auto; margin-right: auto; color: #003d66; }

.page-support__hero-description { font-size: 1.05rem; line-height: 1.6; max-width: 760px; margin: 6px auto 0; color: #333333; }

/* ---------- 2. Intro Section ---------- */
.page-support__intro-section { padding: 10px 16px; }

.page-support__intro-inner { max-width: 1000px; margin: 0 auto; }

.page-support__intro-heading { color: #0477db; font-size: 1.4rem; margin-bottom: 10px; }

.page-support__intro-text { line-height: 1.7; font-size: 1rem; color: #333333; }

/* ---------- 3. Search / Guide Section ---------- */
.page-support__search-guide-section { padding: 10px 16px; }

.page-support__search-guide-inner { max-width: 1000px; margin: 0 auto; text-align: center; }

.page-support__section-heading { color: #0477db; font-size: 1.5rem; margin: 20px 0 8px; line-height: 1.4; }
.page-support__section-description { line-height: 1.6; color: #333333; margin: 0 0 12px; }

.page-support__search-box { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.page-support__search-input { padding: 12px 18px; border: 1px solid #26A9E0; border-radius: 999px; width: 380px; font-size: 0.95rem; color: #333333; max-width: 100%; box-sizing: border-box; }
.page-support__search-button { background-color: #EA7C07; color: #FFFFFF; border: none; padding: 12px 24px; border-radius: 999px; font-weight: 700; cursor: pointer; border: 1px solid #EA7C07; }

.page-support__popular-links { margin-top: 16px; }
.page-support__popular-label { display: inline-block; margin-right: 8px; color: #033d5c; font-weight: 600; }
.page-support__quick-link { text-decoration: none; background: #e0f2fe; padding: 5px 14px; border-radius: 999px; margin: 0 4px; font-weight: 600; transition: background 0.2s; color: #005a8f; }
.page-support__quick-link:hover { background: #26A9E0; }

/* ---------- 4. FAQ Section ---------- */
.page-support__faq-section { padding: 14px 16px; }

.page-support__faq-inner { max-width: 1000px; margin: 0 auto; }

.page-support__faq-accordion { border-top: 1px solid #ddd; }

.page-support__faq-item { border-bottom: 1px solid #ddd; padding: 0; }

.page-support__faq-question { list-style: none; cursor: pointer; font-weight: 600; padding: 16px 4px; display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #001f33; line-height: 1.5; font-size: 1rem; }
.page-support__faq-question::-webkit-details-marker, .page-support__faq-question::marker { display: none; content: ''; }

.page-support__faq-toggle { display: flex; justify-content: center; align-items: center; background: #26A9E0; color: #ffffff; font-size: 18px; line-height: 1; width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto; order: 2; }

.page-support__faq-item[open] .page-support__faq-question { color: #0477db; }

.page-support__faq-answer { padding: 0 12px 18px; line-height: 1.7; color: #333333; }

.page-support__authorize-btn { display: inline-block; text-decoration: none; background: #EA7C07; color: #ffffff; padding: 10px 24px; border-radius: 999px; font-weight: 700; margin: 10px 0; }

.page-support__textlink { color: #26A9E0; font-weight: 600; }

/* ---------- 5. Guide Section ---------- */
.page-support__guide-section { padding: 10px 16px; }

.page-support__guide-inner { max-width: 1100px; margin: 0 auto; padding: 0; }

.page-support__guide-section .page-support__section-heading, .page-support__guide-section .page-support__section-description, .page-support__faq-section .page-support__section-heading, .page-support__faq-section .page-support__section-description { text-align: center; }

.page-support__guide-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 20px; }

.page-support__guide-item { background: #f9faff; border: 1px solid #e5f0f9; border-radius: 16px; overflow: hidden; width: calc(33% - 12px); min-width: 260px; display: flex; flex-direction: column; box-sizing: border-box; }

.page-support__guide-image { width: 100%; display: block; }

.page-support__guide-img { width: 100%; aspect-ratio: 2/1; object-fit: cover; }

.page-support__guide-body { padding: 14px 16px 18px; text-align: center; flex: 1; display: flex; flex-direction: column; }

.page-support__guide-title { color: #004766; font-size: 1.25rem; line-height: 1.3; margin: 0 0 8px; }
.page-support__guide-excerpt { color: #555; font-size: 0.9rem; flex: 1; margin: 0 0 12px; }
.page-support__guide-cta { text-decoration: none; background: #26A9E0; color: #ffffff; padding: 8px 18px; border-radius: 999px; font-weight: 600; margin-top: 15px; }

/* ---------- 6. Contact CTA Section ---------- */
.page-support__contact-cta-section { padding: 40px 16px; }

.page-support__contact-cta-inner { background-color: #e6f6ff; max-width: 900px; text-align: center; padding: 32px 20px; margin: 40px auto 0; border-radius: 24px; border: 1px solid #b6e4ff; box-sizing: border-box; }

.page-support__contact-cta-heading { color: #005c8f; font-size: 1.6rem; margin-top: 0; }
.page-support__contact-cta-sub { margin: 0 auto 24px; color: #333333; max-width: 730px; line-height: 1.7; }

.page-support__support-options { width: 100%; max-width: 100%; overflow: hidden; box-sizing: border-box; }

.page-support__option-btn { display: inline-block; padding: 12px 30px; background-color: #EA7C07; color: #FFFFFF; border-radius: 999px; text-decoration: none; font-weight: 700; }

/* ---------- 7. Responsive Styles (max-width: 768px) ---------- */
@media (max-width: 768px) {
  .page-support__hero-image { aspect-ratio: 2/1 !important; max-width: 100% !important; height: auto !important; }
  .page-support__hero-section { padding-top: 8px; }
  .page-support__guide-list { flex-direction: column; }
  .page-support__guide-item { max-width: 100%; width: 100%; }
  .page-support__guide-img, .page-support__guide img { max-width: 100% !important; height: auto !important; }
  .page-support__option-btn { white-space: normal; word-wrap: break-word; max-width: 100%; box-sizing: border-box; }
  .page-support img { max-width: 100% !important; height: auto !important; }
  .page-support__contact-cta-inner { margin: 30px auto 0; }  
}

@media (max-width: 992px) { .page-support__guide-item { width: calc(50% - 12px); } }

/* ---------- 8. Responsive Styles (max-width: 480px) ---------- */
@media (max-width: 480px) {
  .page-support__guide-item { width: 100%; }
  .page-support__search-input { width: 100%; }
}