/* ==========================================================================
   Vatlieuso — footer.css  (v2 — Premium redesign)
   ========================================================================== */

/* ---- Base ------------------------------------------- */
.vls-footer {
  background: #0D1120;
  color: #8B9BB8;
  margin-top: var(--sp-20);
  position: relative;
  clear: both;
}
/* Gradient accent line at very top */
.vls-footer::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #FFC107 0%, #FF8C00 35%, #1F3355 70%, transparent 100%);
}

/* ====== 1. NEWSLETTER STRIP ====== */
.vls-footer-newsletter {
  background: linear-gradient(100deg, #FFC107 0%, #FFD740 60%, #FFAB00 100%);
  position: relative;
  overflow: hidden;
}
.vls-footer-newsletter::before {
  content: '';
  position: absolute;
  right: -60px;
  top: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  pointer-events: none;
}
.vls-footer-newsletter::after {
  content: '';
  position: absolute;
  left: 38%;
  top: -30px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(0,0,0,0.05);
  pointer-events: none;
}

.vls-footer-newsletter__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
  padding: var(--sp-8) 0;
  position: relative;
  z-index: 1;
}
.vls-footer-newsletter__copy { flex: 1; min-width: 0; }

.vls-footer-newsletter__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.vls-footer-newsletter__title {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 700;
  color: #1A1600;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  margin: 0;
}

.vls-footer-newsletter__form {
  display: flex;
  gap: var(--sp-2);
  flex-shrink: 0;
  width: clamp(320px, 38%, 460px);
}
.vls-footer-newsletter__input {
  flex: 1;
  padding: 12px var(--sp-4);
  border: 2px solid rgba(0,0,0,0.15);
  border-radius: var(--r-2);
  font-family: var(--font-body);
  font-size: var(--fs-14);
  background: rgba(255,255,255,0.85);
  color: #1A1600;
  outline: none;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.vls-footer-newsletter__input::placeholder { color: rgba(0,0,0,0.4); }
.vls-footer-newsletter__input:focus {
  border-color: rgba(0,0,0,0.35);
  background: #fff;
}
.vls-footer-newsletter__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 12px var(--sp-5);
  background: #1A1600;
  color: #FFC107;
  border: none;
  border-radius: var(--r-2);
  font-family: var(--font-display);
  font-size: var(--fs-14);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.vls-footer-newsletter__btn:hover {
  background: #0D1120;
  transform: translateX(2px);
}
.vls-footer-newsletter__status {
  width: 100%;
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 700;
  color: rgba(26, 22, 0, .72);
}

/* ====== 2. MAIN GRID ====== */
.vls-footer__main { padding: var(--sp-14) 0 var(--sp-10); }

.vls-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--sp-12);
  align-items: start;
}

/* --- Brand column --- */
.vls-footer__logo-link { display: inline-block; margin-bottom: var(--sp-5); }
.vls-footer__logo-img {
  height: 44px;
  width: auto;
  opacity: 1;
}

.vls-footer__tagline {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  line-height: var(--lh-relaxed);
  color: #6B7B99;
  max-width: 300px;
  margin: 0 0 var(--sp-6);
}

/* Contact cards */
.vls-footer__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.vls-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  text-decoration: none;
  color: inherit;
  transition: color var(--dur-fast);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-2);
  border: 1px solid transparent;
  transition: all var(--dur-fast);
}
a.vls-footer__contact-item:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}
.vls-footer__contact-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r-2);
  background: rgba(255,193,7,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #FFC107;
  margin-top: 1px;
}
.vls-footer__contact-item > span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.vls-footer__contact-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4A5A78;
}
.vls-footer__contact-val {
  font-family: var(--font-body);
  font-size: var(--fs-13);
  font-weight: 600;
  color: #B0BFDA;
}

/* Social row */
.vls-footer__social {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.vls-footer__social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-2);
  border: 1px solid rgba(255,255,255,0.1);
  color: #6B7B99;
  text-decoration: none;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.vls-footer__social-btn:hover {
  color: #FFC107;
  border-color: #FFC107;
  background: rgba(255,193,7,0.08);
  transform: translateY(-2px);
}

/* --- Nav columns --- */
.vls-footer__col-title {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.vls-footer__col-title::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 2px;
  background: #FFC107;
  border-radius: 1px;
}

.vls-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.vls-footer__links li a,
.vls-footer__links > li > a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 0;
  font-family: var(--font-body);
  font-size: var(--fs-13);
  color: #6B7B99;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast), padding-left var(--dur-fast);
  position: relative;
}
.vls-footer__links li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: #FFC107;
  transition: width 0.25s var(--ease-out);
}
.vls-footer__links li a:hover { color: #fff; padding-left: 4px; }
.vls-footer__links li a:hover::after { width: 24px; }

.vls-footer__links .vls-icon { opacity: 0.45; flex-shrink: 0; transition: opacity var(--dur-fast); }
.vls-footer__links li a:hover .vls-icon { opacity: 1; color: #FFC107; }

/* ====== 3. TRUST / STATS BAR ====== */
.vls-footer-trust {
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.vls-footer-trust__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5) var(--sp-6);
  padding: var(--sp-6) 0;
  flex-wrap: wrap;
}
.vls-footer-trust__stats {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.vls-footer-trust__stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.vls-footer-trust__num {
  font-family: var(--font-mono);
  font-size: var(--fs-22);
  font-weight: 700;
  color: #FFC107;
  font-feature-settings: "tnum" 1;
  letter-spacing: var(--ls-tight);
  line-height: 1;
}
.vls-footer-trust__label {
  font-family: var(--font-body);
  font-size: var(--fs-11);
  color: #4A5A78;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.vls-footer-trust__divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}

.vls-footer-trust__badges {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 1 1 300px;
}
.vls-footer-trust__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-2);
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 600;
  color: #8B9BB8;
}
.vls-footer-trust__badge .vls-icon { color: #FFC107; }

/* ====== 4. BOTTOM BAR ====== */
.vls-footer__bottom { background: rgba(0,0,0,0.3); }
.vls-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0 var(--sp-8);
  flex-wrap: wrap;
}

.vls-footer__copy {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: #3A4A68;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.vls-footer__copy strong { color: #5A6A88; font-weight: 600; }
.vls-footer__copy-sep { color: #2A3A58; }

/* Payment badges */
.vls-footer__payments {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}
.vls-payment-badge {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-1);
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #4A5A78;
  text-transform: uppercase;
}

.vls-footer__bottom-links {
  display: flex;
  gap: var(--sp-4);
}
.vls-footer__bottom-links a {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  color: #3A4A68;
  text-decoration: none;
  transition: color var(--dur-fast);
}
.vls-footer__bottom-links a:hover { color: #8B9BB8; }
.vls-footer__legal-nav { display: flex; gap: var(--sp-4); list-style: none; margin: 0; padding: 0; }
.vls-footer__legal-nav li { margin: 0; }
.vls-footer__legal-nav a {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  color: #3A4A68;
  text-decoration: none;
  transition: color var(--dur-fast);
}
.vls-footer__legal-nav a:hover { color: #8B9BB8; }

/* (Đã bỏ override footer tối/cam cho trang Xả kho — footer dùng tông vàng chung như mọi trang) */

/* ====== Responsive ====== */
@media (max-width: 1100px) {
  .vls-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-8); }
  .vls-footer__grid > .vls-footer__col:last-child {
    grid-column: 1 / -1;
  }
  .vls-footer__grid > .vls-footer__brand { grid-row: auto; }
  .vls-footer__notice { grid-column: 1 / -1; grid-row: auto; align-self: auto; margin-top: 0; }
}
@media (max-width: 860px) {
  .vls-footer-newsletter__inner { flex-direction: column; gap: var(--sp-5); }
  .vls-footer-newsletter__form { width: 100%; }
  .vls-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .vls-footer__grid > .vls-footer__brand { grid-column: 1 / -1; }
  .vls-footer-trust__badges { margin-left: 0; width: 100%; }
  .vls-footer__bottom-inner { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .vls-footer__payments { display: none; }
}
@media (max-width: 540px) {
  .vls-footer__grid { grid-template-columns: 1fr; }
  .vls-footer-trust__inner { gap: var(--sp-4); }
  .vls-footer-trust__divider { display: none; }
  .vls-footer-trust__inner { display: grid; grid-template-columns: 1fr 1fr; }
  .vls-footer-trust__badges { grid-column: 1 / -1; }
  .vls-footer-newsletter__title { font-size: var(--fs-17); }
}

/* ---- Notice — lấp khoảng trống lưới, không tăng chiều cao footer ---- */
.vls-footer__grid > .vls-footer__brand { grid-row: 1 / span 2; }
.vls-footer__notice {
  grid-column: 2 / -1;
  grid-row: 2;
  align-self: start;        /* dời lên sát menu, lấp đúng vùng trống trên */
  margin-top: -32px;        /* kéo lên gần menu (bù khoảng row-gap) */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  color: #AEBBD0;
}
.vls-footer__notice-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: #FFC107;
  opacity: .9;
}
.vls-footer__notice-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}