.footer {
  background: #C6C288;
  border-top: 3px double #CC3333;
  padding: 5px 0;
  font-family: Tahoma, sans-serif;
  margin: 0;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0 15px;
}

.footer-col {
  flex: 1 1 220px;
  min-width: 220px;
  
}

.footer-col h3 {
  color: #CC3333;
  font-size: 16px;
  margin-bottom: 10px;
}

.footer-col p,
.footer-col a {
    
  font-size: 14px;
  color: #333;
  line-height: 1.6;
  text-decoration: none;
}

.footer-col a:hover {
  color: #CC3333;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 6px;
}

/* Cho cột LIÊN HỆ rộng hơn */
.footer-col:first-child {
    flex: 1 1 350px;      /* rộng hơn – bạn có thể tăng 380–420 nếu cần */
    min-width: 330px;     /* đảm bảo không bị bóp nhỏ */
}

.fanpage-box {
  background: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  font-size: 13px;
}

.footer-bottom {
  background-color: #BBBB00;
  text-align: center;
  padding: 5px;
  font-size: 14px;
  color: #003366;
  margin: 0;          /* xoá margin mặc định */
  line-height: 1.4;   /* đảm bảo chiều cao text gọn */
}
/* Danh sách liên hệ */
.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Tăng khoảng cách các dòng trong cột LIÊN HỆ */
.footer-contact li {
    margin-bottom: 6px !important; /* bằng khoảng cách bên Hỗ Trợ */
    line-height: 1.6;    
    font-size: 14px;
}


/* Căn icon đẹp, thẳng hàng */
.footer-contact li i {
  width: 18px;
  text-align: center;
  margin-right: 6px;
  font-size: 16px;
}


.footer {
  margin: 0;
  padding: 0;
}

.footer-stats {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}
.footer-stats li {
  margin-bottom: 4px;
}
.footer-stats strong {
  font-weight: bold;
}
.footer-stats .online strong {
  color: #6f42c1; /* xanh lá */
}
.footer-stats .today strong {
  color: #007bff; /* xanh dương */
}
.footer-stats .yesterday strong {
  color: #000033; /* vàng cam */
}
.footer-stats .total strong {
  color: #dc3545; /* đỏ */
}

.footer-stats li i {
  margin-right: 6px;
  font-size: 16px;
}

.footer-stats li.online i {
  color: #28a745; /* xanh lá */
}
.footer-stats li.today i {
  color: #ffc107; /* vàng */
}
.footer-stats li.yesterday i {
  color: #fd7e14; /* cam */
}
.footer-stats li.total i {
  color: #dc3545; /* đỏ */
}
.ft-company i {
  color: #8e44ad; /* tím đậm */
}
.ft-address i {
  color: #e74c3c; /* đỏ */
}
.ft-phone i {
  color: #27ae60; /* xanh lá */
}
.ft-email i {
  color: #2980b9; /* xanh dương */
}
/* HỖ TRỢ KHÁCH HÀNG – màu icon riêng từng dòng */
.ht-buy i {
    color: #e67e22;   /* cam */
}

.ht-pay i {
    color: #27ae60;   /* xanh lá */
}

.ht-guide i {
    color: #2980b9;   /* xanh dương */
}

.ht-support i {
    color: #c0392b;   /* đỏ */
}

/* Responsive Mobile */
@media (max-width: 768px) {

  .footer-container {
    flex-direction: column;
    gap: 10px;
    text-align: left;
  }

  /* Xóa khoảng trống cột đã bỏ */
  .footer-col {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }

  .footer-col h3 {
    margin-top: 10px;
  }
  
 /* Reset toàn bộ min-width cứng trên mobile */
  .footer-col,
  .footer-col:first-child {
    min-width: 100% !important;
    width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* FANPAGE xuống dòng chuẩn mobile */
  .fanpage-box {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 8px;
    overflow: hidden;
  }

  .fanpage-box * {
    max-width: 100% !important;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .fanpage-box iframe {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }
  
}