/* ═══════════════════════════════════════════════════════════════
   Shared Footer - viecgannha
   ═══════════════════════════════════════════════════════════════ */

.home-footer-section {
    margin: 40px auto 0;
    padding: 0;
    width: 100%;
}

.home-footer-card {
    background-image: url("/static/images/footer_background.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top-left-radius: 44px;
    border-top-right-radius: 44px;
    padding: 104px 77px 104px 56px;
}

/* ── Brand column ─────────────────────────────────────────── */

.home-footer-brand-col {
    min-width: 250px;
    margin-top: 16px;
    margin-right: 16px;
}

.home-footer-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: #fff;
    font-weight: 800;
}

.home-footer-brand img {
    width: 96px;
    height: 96px;
    object-fit: contain;
}

.home-footer-brand span {
    font-size: 30px;
    letter-spacing: 0.4px;
}

.home-footer-brand-col p {
    margin: 14px 0 0;
    text-align: center;
    color: #dde2e8;
    font-size: 16px;
    font-weight: 500;
    padding-top: 14px;
    position: relative;
}

.home-footer-brand-col p::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 51px;
    height: 1px;
    background: #FF6A17;
}

.home-footer-brand-col a {
    color: #dde2e8;
}

body > footer > div > div.home-footer-main.d-flex > div.home-footer-brand-col > p > a {
    text-decoration: underline;
}

/* ── Link columns ─────────────────────────────────────────── */

.home-footer-link {
    width: 100%;
    border-left: 1px solid #FFFFFF82;
    margin-top: 15px;
    display: flex;
    align-items: stretch;
}

.home-footer-link-col {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    padding: 14px 14px 12px;
    color: #e8ebef;
    margin-left: 16px;
    box-shadow:
        inset 0px 1px 1px 0px rgba(255, 255, 255, 0.35),
        inset 0px -1px 1px 0px rgba(0, 0, 0, 0.1);
}

.home-footer-contact-col {
    min-width: 0;
}

/* Mac 14 inch (1512px) trở xuống: 3 cột đầu vừa nội dung, cuối chiếm còn lại */
@media (max-width: 1536px) {
    .home-footer-link-col:not(.home-footer-contact-col) {
        flex: 0 0 auto;
        width: auto;
    }
    .home-footer-contact-col {
        flex: 1 1 0%;
    }
}

/* Màn lớn hơn 1536px: 4 cột chia đều */
@media (min-width: 1537px) {
    .home-footer-link-col {
        flex: 1 1 0%;
    }
}

.home-footer-link-col h3 {
    margin: 0 0 15px;
    font-size: 20px;
    color: #fff;
    font-weight: 700;
    position: relative;
    padding-left: 12px;
}

.home-footer-link-col h3::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff6a17;
    position: absolute;
    left: 0;
    top: 8px;
}

.home-footer-link-col a {
    display: block;
    color: #ecf0f4;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
    padding: 10px 0;
    transition: color 0.2s ease;
}

.home-footer-link-col a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.home-footer-link-col a::before {
    content: "\203A";
    margin-right: 8px;
    color: #f6f8fb;
}

.home-footer-contact-col a::before {
    content: "\203A";
}

/* ── Bottom bar ───────────────────────────────────────────── */

.home-footer-bottom {
    margin-top: 62px;
    border-radius: 28px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.004);
    box-shadow: 
        /* Highlight góc trên-trái (siêu gọn) */
        inset 1px 1px 2px 0px rgba(255, 255, 255, 0.8), 
        
        /* Hiệu ứng sáng viền trên (Siêu thu gọn: bám sát viền top) */
        inset 0px 5px 4px -3px rgba(255, 255, 255, 0.6), 
        
        /* Bóng viền dưới */
        inset 0px -15px 8px -12px rgba(203, 203, 203, 0.44), 
        
        /* Lớp phủ màu mỏng ngay dưới viền top */
        inset 0px 6px 6px -4px #E0E0E0;
    min-height: 100px;
}

.home-footer-bottom-inner {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 83px;

    /* Nền giảm độ đục xuống 2% để trong hơn */
    background: rgba(255, 255, 255, 0.02); 

    /* Blur giữ ở mức 4px - 5px để hậu cảnh nhìn rõ hơn */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 17px;

    box-shadow: 
    inset 0px 1px 1px 0px rgba(255, 255, 255, 0.35),
    inset 0px -1px 1px 0px rgba(0, 0, 0, 0.1);
    padding: 13px 15px;
}

/* VỆT SÁNG PHÍA SAU (Giữ nguyên) */
.home-footer-bottom-inner::before {
  content: '';
  position: absolute;
  top: -20%;
  right: 25%;
  width: 120px;
  height: 140%;
  background: radial-gradient(
    ellipse at center, 
    rgba(80, 150, 255, 0.28) 0%, 
    rgba(80, 150, 255, 0) 70%
  );
  pointer-events: none;
  z-index: 0;
}

.home-footer-bottom-inner > * {
  position: relative;
  z-index: 1;
}

.home-footer-copy {
    color: #eceff4;
    font-size: 16px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.home-footer-copy a {
    color: #eceff4;
    text-decoration: none;
}

.home-footer-copy a:hover {
    text-decoration: underline;
}

.home-footer-copy img {
    width: 50px;
    height: 50px;
}

.home-footer-copy-icon {
  padding: 14px 17px;
  border-radius: 14px;
  
  /* 1. Thay transparent bằng viền trắng mờ (tăng/giảm alpha 0.15 - 0.25 tùy độ rõ mong muốn) */
  border: 1px solid rgba(255, 255, 255, 0.18);

  /* 2. Nền kính mỏng hòa vào background */
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  /* 3. (Tùy chọn) Highlight nhẹ mép viền trên giúp nổi khối icon hơn */
  box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.3);
}

.home-footer-copy-icon img {
    width: 24px;
    height: 29px;
}

.home-footer-top-btn {
    text-decoration: none;
    color: #f2f5f9;
    font-size: 17px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 10px;
    padding: 9px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: scale 0.3s ease;
    min-height: 58px;
}

.home-footer-top-btn:hover {
    scale: 1.1;
}

.home-footer-top-btn i {
    width: 33px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Chỉnh độ to nhỏ của icon */
#home-top > footer > div > div.home-footer-bottom > div > a > i {
  font-size: 25px; /* Chỉnh size icon ở thẻ cha */
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 1024px) {
    .home-footer-main {
        display: block !important;
    }
    .home-footer-link {
        display: grid !important;
        gap: 10px;
        grid-template-columns: repeat(2, 1fr);
        margin-top: 15px;
        border: none;
    }
    .home-footer-link-col {
        margin: 0;
    }
}

@media (max-width: 576px) {
    .home-footer-link {
        grid-template-columns: repeat(1, 1fr);
    }
    .home-footer-bottom-inner {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}