/* ==========================================================================
   Toplist Footer & Newsletter Component Stylesheet (Scoped v1.4.0)
   Toàn bộ selector được scoped dưới .tl-footer-root chống xung đột với Theme/Elementor
   ========================================================================== */

.tl-footer-root {
  --tl-primary-blue: #0052cc;
  --tl-primary-hover: #0043aa;
  --tl-footer-bg: #004ebd;
  --tl-footer-darker: #0042a3;
  --tl-social-bg: #1a67db;
  --tl-social-hover: #2977eb;
  
  --tl-text-heading: #0b2265;
  --tl-text-body: #475569;
  --tl-text-muted: #64748b;
  --tl-text-placeholder: #94a3b8;
  
  --tl-footer-text-light: #ffffff;
  --tl-footer-text-muted: #cfe0fc;
  --tl-footer-text-dim: #b8d4fc;
  
  --tl-border-light: #e2e8f0;
  --tl-border-footer: rgba(255, 255, 255, 0.16);
  --tl-border-footer-line: rgba(255, 255, 255, 0.14);
  
  --tl-shadow-card: 0 16px 44px -12px rgba(15, 23, 42, 0.09);
  --tl-shadow-btn: 0 4px 14px rgba(0, 82, 204, 0.28);
  
  --tl-radius-outer: 20px;
  --tl-radius-inner: 10px;
  --tl-radius-pill: 9999px;
  
  --tl-transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --tl-transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  width: 100%;
  box-sizing: border-box;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  color: var(--tl-text-body);
}

.tl-footer-root *,
.tl-footer-root *::before,
.tl-footer-root *::after {
  box-sizing: border-box;
}

/* 1. CONTAINER & KHUNG FOOTER */
.tl-footer-root .tl-footer-container {
  width: 100%;
  margin: 0 auto;
}

.tl-footer-root .tl-footer-container.tl-footer-boxed {
  max-width: 1320px;
  padding: 0 20px;
}

.tl-footer-root .tl-footer-container.tl-footer-fullwidth {
  max-width: 100%;
  padding: 0 16px;
}

.tl-footer-root .tl-footer-card {
  background-color: transparent;
  border-radius: var(--tl-radius-outer);
  overflow: hidden;
  box-shadow: var(--tl-shadow-card);
  width: 100%;
}

/* 2. LOGO THƯƠNG HIỆU FOOTER */
.tl-footer-root .tl-brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  user-select: none;
}

.tl-footer-root .tl-brand-logo .tl-logo-icon {
  flex-shrink: 0;
}

.tl-footer-root .tl-brand-logo .tl-logo-text {
  font-size: 26px;
  font-weight: 800;
  color: var(--tl-primary-blue);
  letter-spacing: -0.6px;
}

.tl-footer-root .tl-brand-logo.tl-logo-light .tl-logo-text {
  color: var(--tl-footer-text-light);
}

.tl-footer-root .tl-footer-logo-img {
  display: block;
  object-fit: contain;
}

/* ==========================================================================
   3. PHẦN 1: NEWSLETTER BANNER (Nền trắng)
   ========================================================================== */
.tl-footer-root .tl-newsletter-card {
  background-color: #ffffff;
  padding: 38px 48px;
  position: relative;
  border-top-left-radius: var(--tl-radius-outer);
  border-top-right-radius: var(--tl-radius-outer);
}

.tl-footer-root .tl-newsletter-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* 3.1 Cột Brand Newsletter */
.tl-footer-root .tl-newsletter-brand {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.tl-footer-root .tl-brand-slogan {
  font-size: 13.5px;
  line-height: 1.55;
  color: #334155;
  font-weight: 500;
  max-width: 215px;
  margin: 0;
}

/* Phân cách dọc */
.tl-footer-root .tl-newsletter-divider {
  width: 1px;
  height: 72px;
  background-color: #e5eaf2;
  flex-shrink: 0;
}

/* 3.2 Form Newsletter */
.tl-footer-root .tl-newsletter-content {
  flex: 1;
  max-width: 460px;
}

.tl-footer-root .tl-newsletter-title {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--tl-text-heading);
  margin: 0 0 6px 0;
  letter-spacing: -0.2px;
}

.tl-footer-root .tl-newsletter-desc {
  font-size: 13px;
  color: var(--tl-text-muted);
  margin: 0 0 15px 0;
  line-height: 1.5;
}

.tl-footer-root .tl-newsletter-form {
  display: flex;
  gap: 10px;
  align-items: center;
}

.tl-footer-root .tl-input-wrapper {
  flex: 1;
  position: relative;
}

.tl-footer-root .tl-input-wrapper input {
  width: 100%;
  height: 42px;
  border: 1px solid var(--tl-border-light);
  border-radius: 8px;
  padding: 0 16px;
  font-size: 13.5px;
  font-family: inherit;
  color: #1e293b;
  background-color: #ffffff;
  outline: none;
  transition: var(--tl-transition-fast);
}

.tl-footer-root .tl-input-wrapper input::placeholder {
  color: var(--tl-text-placeholder);
}

.tl-footer-root .tl-input-wrapper input:focus {
  border-color: var(--tl-primary-blue);
  box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.12);
}

.tl-footer-root .tl-input-wrapper input.input-error {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.tl-footer-root .tl-submit-btn {
  height: 42px;
  background-color: var(--tl-primary-blue);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 0 20px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--tl-transition-fast);
}

.tl-footer-root .tl-submit-btn:hover {
  background-color: var(--tl-primary-hover);
  box-shadow: var(--tl-shadow-btn);
}

.tl-footer-root .tl-submit-btn:active {
  transform: scale(0.98);
}

.tl-footer-root .tl-form-feedback {
  font-size: 12.5px;
  margin-top: 6px;
  min-height: 18px;
  display: none;
}

.tl-footer-root .tl-form-feedback.success {
  display: block;
  color: #16a34a;
}

.tl-footer-root .tl-form-feedback.error {
  display: block;
  color: #dc2626;
}

/* 3.3 Minh họa 3D */
.tl-footer-root .tl-newsletter-illustration {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.tl-footer-root .tl-illustration-3d {
  position: relative;
  transition: transform 0.4s ease;
}

.tl-footer-root .tl-illustration-3d:hover {
  transform: translateY(-3px);
}

/* ==========================================================================
   4. PHẦN 2: MAIN FOOTER (Nền xanh Brand Blue)
   ========================================================================== */
.tl-footer-root .tl-footer-main {
  background-color: var(--tl-footer-bg);
  padding: 48px 48px 28px 48px;
  color: var(--tl-footer-text-light);
  border-bottom-left-radius: var(--tl-radius-outer);
  border-bottom-right-radius: var(--tl-radius-outer);
}

.tl-footer-root .tl-footer-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr 1fr 1.3fr;
  gap: 36px;
  align-items: flex-start;
}

/* 4.1 Cột Brand Info */
.tl-footer-root .tl-footer-col-brand .tl-brand-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--tl-footer-text-muted);
  margin-top: 18px;
  margin-bottom: 22px;
  max-width: 290px;
}

.tl-footer-root .tl-social-links {
  display: flex;
  gap: 10px;
  align-items: center;
}

.tl-footer-root .tl-social-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--tl-radius-pill);
  background-color: var(--tl-social-bg);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: var(--tl-transition-fast);
}

.tl-footer-root .tl-social-btn:hover {
  background-color: var(--tl-social-hover);
  transform: translateY(-2px);
}

/* 4.2 Tiêu đề cột & Accordion Button */
.tl-footer-root .tl-footer-accordion-header {
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
  display: block;
  width: 100%;
}

.tl-footer-root .tl-footer-col-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--tl-footer-text-light);
  margin: 0 0 18px 0;
  letter-spacing: -0.1px;
}

.tl-footer-root .tl-chevron-icon {
  display: none;
}

/* 4.3 Danh sách liên kết */
.tl-footer-root .tl-footer-links {
  list-style: none !important;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tl-footer-root .tl-footer-links li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.tl-footer-root .tl-footer-links a {
  color: var(--tl-footer-text-muted);
  text-decoration: none !important;
  font-size: 13.5px;
  transition: color var(--tl-transition-fast);
  display: inline-block;
}

.tl-footer-root .tl-footer-links a:hover {
  color: var(--tl-footer-text-light);
}

/* 4.4 Cột Thông tin Liên hệ */
.tl-footer-root .tl-contact-info {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tl-footer-root .tl-contact-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.tl-footer-root .tl-contact-icon {
  color: var(--tl-footer-text-light);
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tl-footer-root .tl-contact-text {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tl-footer-text-muted);
  display: flex;
  flex-direction: column;
}

.tl-footer-root .tl-contact-link {
  color: var(--tl-footer-text-muted);
  text-decoration: none !important;
  transition: color var(--tl-transition-fast);
}

.tl-footer-root .tl-contact-link:hover {
  color: var(--tl-footer-text-light);
}

/* 4.5 Phân cách ngang & Thanh bản quyền */
.tl-footer-root .tl-footer-divider {
  width: 100%;
  height: 1px;
  background-color: var(--tl-border-footer-line);
  margin: 40px 0 24px 0;
}

.tl-footer-root .tl-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--tl-footer-text-dim);
  flex-wrap: wrap;
  gap: 16px;
}

.tl-footer-root .tl-copyright-text {
  margin: 0;
}

.tl-footer-root .tl-bottom-nav {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.tl-footer-root .tl-bottom-nav a {
  color: var(--tl-footer-text-dim);
  text-decoration: none !important;
  transition: color var(--tl-transition-fast);
}

.tl-footer-root .tl-bottom-nav a:hover {
  color: var(--tl-footer-text-light);
}

.tl-footer-root .tl-nav-sep {
  opacity: 0.4;
}

/* ==========================================================================
   5. RESPONSIVE DESIGN (BREAKPOINTS)
   ========================================================================== */

/* 5.1 Large Tablet & Laptop nhỏ (<= 1200px) */
@media (max-width: 1200px) {
  .tl-footer-root .tl-newsletter-card {
    padding: 32px 36px;
  }
  .tl-footer-root .tl-footer-main {
    padding: 40px 36px 24px 36px;
  }
  .tl-footer-root .tl-footer-grid {
    gap: 28px;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1.25fr;
  }
}

/* 5.2 Tablet vừa (<= 992px) */
@media (max-width: 992px) {
  .tl-footer-root .tl-newsletter-inner {
    flex-wrap: wrap;
    gap: 24px;
  }
  .tl-footer-root .tl-newsletter-illustration {
    display: none;
  }
  .tl-footer-root .tl-newsletter-divider {
    display: none;
  }
  .tl-footer-root .tl-newsletter-content {
    max-width: 100%;
    width: 100%;
  }
  .tl-footer-root .tl-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .tl-footer-root .tl-footer-col-brand {
    grid-column: 1 / -1;
  }
}

/* 5.3 Mobile Screens (<= 768px - Theo thiết kế Mockup Mobile) */
@media (max-width: 768px) {
  .tl-footer-root .tl-footer-card {
    border-radius: 14px;
  }

  /* Newsletter Mobile */
  .tl-footer-root .tl-newsletter-card {
    padding: 24px 20px;
    border-radius: 14px 14px 0 0;
  }
  .tl-footer-root .tl-newsletter-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .tl-footer-root .tl-newsletter-brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .tl-footer-root .tl-brand-slogan {
    max-width: 100%;
    font-size: 13px;
  }
  .tl-footer-root .tl-newsletter-form {
    flex-direction: column;
    gap: 10px;
  }
  .tl-footer-root .tl-input-wrapper,
  .tl-footer-root .tl-submit-btn {
    width: 100%;
  }
  .tl-footer-root .tl-submit-btn {
    justify-content: center;
  }

  /* Main Footer Mobile: Chuyển các cột sang dạng Accordion */
  .tl-footer-root .tl-footer-main {
    padding: 28px 20px 20px 20px;
    border-radius: 0 0 14px 14px;
  }
  .tl-footer-root .tl-footer-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .tl-footer-root .tl-footer-col-brand {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--tl-border-footer-line);
    margin-bottom: 8px;
  }
  .tl-footer-root .tl-footer-col-brand .tl-brand-desc {
    max-width: 100%;
    margin-top: 12px;
    margin-bottom: 16px;
  }

  /* Accordion Header & Chevron */
  .tl-footer-root .tl-footer-col-accordion {
    border-bottom: 1px solid var(--tl-border-footer-line);
  }
  .tl-footer-root .tl-footer-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    cursor: pointer;
  }
  .tl-footer-root .tl-footer-col-title {
    margin: 0;
    font-size: 15px;
  }
  .tl-footer-root .tl-chevron-icon {
    display: block;
    color: var(--tl-footer-text-dim);
    transition: transform var(--tl-transition-fast);
    flex-shrink: 0;
  }

  /* Trạng thái Accordion đóng / mở */
  .tl-footer-root .tl-footer-accordion-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  }

  .tl-footer-root .tl-footer-col-accordion.is-open .tl-footer-accordion-content {
    max-height: 500px;
    opacity: 1;
    padding-bottom: 18px;
  }

  .tl-footer-root .tl-footer-col-accordion.is-open .tl-chevron-icon {
    transform: rotate(180deg);
    color: var(--tl-footer-text-light);
  }

  /* Bottom Bar Mobile */
  .tl-footer-root .tl-footer-divider {
    margin: 20px 0 16px 0;
  }
  .tl-footer-root .tl-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}