/* Phối màu chân trang CHUNG (17/10/2026) — GIỮ NGUYÊN bố cục cũ của từng trang, chỉ thiết kế lại màu:
   nền rừng xanh đậm → xanh ngọc, quầng sáng vàng mủ/ngọc lục bảo, vạch 3 màu trên cùng,
   mỗi mục liên hệ một màu, nút mạng xã hội đổi sang màu thương hiệu khi rê chuột.
   Nạp SAU <style> của trang nên chỉ ghi đè màu/viền/bóng, không đụng kích thước & lưới. */

.footer {
    --ft-gold: #f6c453;
    --ft-amber: #f59e0b;
    --ft-lime: #a3e635;
    --ft-mint: #34d399;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(620px 300px at 92% -10%, rgba(246, 196, 83, 0.20), transparent 70%),
        radial-gradient(560px 320px at -5% 110%, rgba(52, 211, 153, 0.18), transparent 70%),
        linear-gradient(125deg, #072b16 0%, #0b4223 38%, #0e5235 68%, #0f4f4a 100%) !important;
    color: #fff;
}
/* vạch 3 màu trên cùng: lục → chanh → vàng mủ */
.footer::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: linear-gradient(90deg, #22c55e 0%, var(--ft-lime) 45%, var(--ft-gold) 75%, var(--ft-amber) 100%);
    z-index: 1;
}
/* hoạ tiết sọc chéo rất mờ cho có chất liệu */
.footer::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 14px);
    -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 75%);
            mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 75%);
    pointer-events: none;
}

/* tiêu đề cột: chữ trắng, gạch chân chanh → vàng */
.footer .footer-title,
.footer h4 { color: #fff; letter-spacing: .02em; }
.footer .footer-title::after,
.footer h4::after {
    width: 36px !important;
    height: 3px !important;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--ft-lime), var(--ft-gold)) !important;
}
.footer-about h3 {
    background: linear-gradient(90deg, #fff 0%, #fff 55%, var(--ft-gold) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
}
.footer-brand p, .footer-about p,
.footer > .container > .footer-grid > div > p { color: rgba(236, 253, 245, 0.82) !important; opacity: 1; }

/* logo trang chủ: thẻ trắng có bóng thay vì ô trắng phẳng */
.footer-logo img { box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45); }

/* ô đăng ký nhận tin: nền kính + nút vàng mủ */
.footer .footer-newsletter > div {
    border-radius: 10px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: border-color .2s, box-shadow .2s;
}
.footer .footer-newsletter > div:focus-within {
    border-color: rgba(246, 196, 83, 0.7);
    box-shadow: 0 0 0 3px rgba(246, 196, 83, 0.18);
}
.footer .footer-newsletter input {
    background: transparent !important;
    color: #fff !important;
    border-radius: 7px 0 0 7px !important;
}
.footer .footer-newsletter input::placeholder { color: rgba(236, 253, 245, 0.6); }
.footer .footer-newsletter button {
    border-radius: 7px !important;
    background: linear-gradient(135deg, var(--ft-gold) 0%, var(--ft-amber) 100%) !important;
    color: #0b3a1d !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    box-shadow: 0 6px 16px -6px rgba(245, 158, 11, 0.7);
    transition: transform .2s, box-shadow .2s, filter .2s;
}
.footer .footer-newsletter button:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 10px 20px -8px rgba(245, 158, 11, 0.8);
}

/* liên hệ: mỗi mục một màu, biểu tượng trong ô bo góc */
.footer .footer-contact li { align-items: center; color: rgba(236, 253, 245, 0.9); }
.footer .footer-contact li > i {
    flex: 0 0 28px;
    width: 28px !important;
    height: 28px;
    margin-top: 0 !important;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px !important;
}
.footer .footer-contact i.fa-map-marker-alt { color: #ffab91 !important; background: rgba(255, 138, 101, 0.16); }
.footer .footer-contact i.fa-phone          { color: #6ee7b7 !important; background: rgba(52, 211, 153, 0.16); }
.footer .footer-contact i.fa-envelope       { color: #93c5fd !important; background: rgba(96, 165, 250, 0.16); }
.footer .footer-contact i.fa-globe          { color: #fcd34d !important; background: rgba(246, 196, 83, 0.16); }
.footer .footer-contact a:hover { color: var(--ft-gold) !important; }

/* mạng xã hội: viền kính, rê chuột hiện màu thương hiệu */
.footer .footer-social a {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.16);
    transition: background .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.footer .footer-social a:hover { transform: translateY(-3px); border-color: transparent; }
.footer .footer-social a:has(.fa-facebook-f):hover { background: #1877f2 !important; box-shadow: 0 8px 16px -6px rgba(24, 119, 242, .7); }
.footer .footer-social a:has(.fa-linkedin-in):hover { background: #0a66c2 !important; box-shadow: 0 8px 16px -6px rgba(10, 102, 194, .7); }
.footer .footer-social a:has(.fa-youtube):hover     { background: #ff0033 !important; box-shadow: 0 8px 16px -6px rgba(255, 0, 51, .6); }
.footer .footer-social a:has(.fa-comment-dots):hover { background: #0068ff !important; box-shadow: 0 8px 16px -6px rgba(0, 104, 255, .7); }

/* dải cuối */
.footer .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12) !important; opacity: 1; }
.footer .footer-bottom p { color: rgba(236, 253, 245, 0.62) !important; }
.footer .footer-visitors i.fa-eye   { color: #7dd3fc !important; }
.footer .footer-visitors i.fa-clock { color: var(--ft-gold) !important; }
.footer .footer-visitors strong     { color: #fff !important; }

/* ghi nhận đơn vị phát triển: tên người thực hiện hé ra khi rê chuột / chạm (điện thoại) */
.footer .footer-credit { margin: 6px 0 0 !important; font-size: 11.5px !important; color: rgba(236, 253, 245, 0.55) !important; }
.footer .fc-dev {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: default; outline: none;
    transition: border-color .3s, background .3s, color .3s;
}
.footer .fc-ic {
    width: 20px; height: 20px; flex: 0 0 20px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(246, 196, 83, 0.22), rgba(163, 230, 53, 0.12));
    border: 1px solid rgba(246, 196, 83, 0.45);
    color: var(--ft-gold);
    font-size: 9px;
}
.footer .fc-dev strong { font-weight: 600; color: rgba(236, 253, 245, 0.8); }
.footer .fc-author {
    display: inline-flex; align-items: center; gap: 5px;
    max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
    transition: max-width .5s ease, opacity .4s ease;
}
.footer .fc-sep { margin: 0 2px 0 4px; }
.footer .fc-author b {
    font-weight: 700;
    background: linear-gradient(90deg, var(--ft-gold), var(--ft-amber));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer .fc-dev:hover, .footer .fc-dev:focus {
    border-color: rgba(246, 196, 83, 0.35);
    background: rgba(255, 255, 255, 0.05);
}
.footer .fc-dev:hover .fc-author, .footer .fc-dev:focus-within .fc-author, .footer .fc-dev:focus .fc-author { max-width: 380px; opacity: 1; }
.footer .fc-tel { color: var(--ft-gold) !important; font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums; }
.footer .fc-tel:hover { text-decoration: underline; }
@media (max-width: 768px) {
    .footer .footer-credit { font-size: 10px !important; }
    .footer .fc-dev { flex-wrap: wrap; justify-content: center; }
}