/* ==========================================================================
   Footer 3 cột cân bằng (2026-10-14) — nạp ở Home / Detail - 2col / Admin
   Khung: .ft-grid = [AuthorPane .ft-main (1fr)] + [cột 3 .ft-connect (vừa nội dung, sát mép phải)].
   .ft-main chia đôi (.ft-cols: Giới thiệu | Liên hệ) → 3 cột bắt đầu cách đều nhau, cột 3 sát mép phải container.
   Icon dòng thông tin: lớp .ft-i-* trên <li> (CSS mask) — nội dung HTML của module KHÔNG chứa SVG
   nên trình soạn thảo DNN không làm mất icon.
   ========================================================================== */
#sub-footer {
    --ft-i-pin: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M12%202C8.13%202%205%205.13%205%209c0%205.25%207%2013%207%2013s7-7.75%207-13c0-3.87-3.13-7-7-7zm0%209.5a2.5%202.5%200%201%201%200-5%202.5%202.5%200%200%201%200%205z'%2F%3E%3C%2Fsvg%3E");
    --ft-i-clock: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm.5%205v5.25l4.5%202.67-.75%201.23L11%2013V7h1.5z'%2F%3E%3C%2Fsvg%3E");
    --ft-i-phone: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M6.62%2010.79a15.05%2015.05%200%200%200%206.59%206.59l2.2-2.2a1%201%200%200%201%201.02-.24c1.12.37%202.33.57%203.57.57a1%201%200%200%201%201%201V20a1%201%200%200%201-1%201A17%2017%200%200%201%203%204a1%201%200%200%201%201-1h3.5a1%201%200%200%201%201%201c0%201.25.2%202.45.57%203.57a1%201%200%200%201-.25%201.02l-2.2%202.2z'%2F%3E%3C%2Fsvg%3E");
    --ft-i-fax: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M19%208H5a3%203%200%200%200-3%203v6h4v4h12v-4h4v-6a3%203%200%200%200-3-3zm-3%2011H8v-5h8v5zm3-7a1%201%200%201%201%200-2%201%201%200%200%201%200%202zM18%203H6v4h12V3z'%2F%3E%3C%2Fsvg%3E");
    --ft-i-mail: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M20%204H4a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V6a2%202%200%200%200-2-2zm0%204-8%205-8-5V6l8%205%208-5v2z'%2F%3E%3C%2Fsvg%3E");
    --ft-i-user: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M12%2012a5%205%200%201%200%200-10%205%205%200%200%200%200%2010zm0%202c-3.33%200-10%201.67-10%205v3h20v-3c0-3.33-6.67-5-10-5z'%2F%3E%3C%2Fsvg%3E");
    --ft-i-cross: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M19%203H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V5a2%202%200%200%200-2-2zm-2%2010h-4v4h-2v-4H7v-2h4V7h2v4h4v2z'%2F%3E%3C%2Fsvg%3E");
    --ft-i-eye: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M12%204.5C7%204.5%202.73%207.61%201%2012c1.73%204.39%206%207.5%2011%207.5s9.27-3.11%2011-7.5c-1.73-4.39-6-7.5-11-7.5zM12%2017a5%205%200%201%201%200-10%205%205%200%200%201%200%2010zm0-8a3%203%200%201%200%200%206%203%203%200%200%200%200-6z'%2F%3E%3C%2Fsvg%3E");
    --ft-gap: 40px;
    --ft-line: rgba(255, 255, 255, .28);
    padding: 38px 0 26px;
    text-align: left;
}
#sub-footer .ft-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: var(--ft-gap);
    align-items: start;
}
#sub-footer .ft-main { min-width: 0; }
#sub-footer .ft-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ft-gap);
}
#sub-footer .ft-col,
#sub-footer .ft-connect { min-width: 220px; }
#sub-footer .Normal,
#sub-footer .DNNModuleContent { color: #fff; font-size: 14px; line-height: 1.5; }

/* Tiêu đề cột */
#sub-footer .ft-title {
    position: relative;
    margin: 0 0 18px;
    padding: 0 0 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.3;
    text-transform: uppercase;
}
#sub-footer .ft-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .75);
}

/* Cột 1: logo + tên */
#sub-footer .ft-brand { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
#sub-footer .ft-logo {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    padding: 3px;
    border-radius: 50%;
    background: #fff;
    object-fit: contain;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
#sub-footer .ft-brand-name { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; text-transform: uppercase; }

/* Danh sách dòng có icon */
#sub-footer .ft-list { margin: 0; padding: 0; list-style: none; }
#sub-footer .ft-list li {
    position: relative;
    margin: 0 0 12px;
    padding: 0 0 0 34px;
    color: #fff;
    font-size: 14px;
    line-height: 1.5;
}
#sub-footer .ft-list li:last-child { margin-bottom: 0; }
#sub-footer .ft-list li::before,
#sub-footer .ft-counter .ModLuotTruyCapC > div::before {
    content: "";
    position: absolute;
    left: 0;
    top: -1px;
    width: 24px;
    height: 24px;
    background-color: #fff;
    opacity: .95;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left center;
    mask-position: left center;
    -webkit-mask-size: 22px 22px;
    mask-size: 22px 22px;
}
#sub-footer .ft-i-pin::before { -webkit-mask-image: var(--ft-i-pin); mask-image: var(--ft-i-pin); }
#sub-footer .ft-i-clock::before { -webkit-mask-image: var(--ft-i-clock); mask-image: var(--ft-i-clock); }
#sub-footer .ft-i-phone::before { -webkit-mask-image: var(--ft-i-phone); mask-image: var(--ft-i-phone); }
#sub-footer .ft-i-fax::before { -webkit-mask-image: var(--ft-i-fax); mask-image: var(--ft-i-fax); }
#sub-footer .ft-i-mail::before { -webkit-mask-image: var(--ft-i-mail); mask-image: var(--ft-i-mail); }
#sub-footer .ft-i-user::before { -webkit-mask-image: var(--ft-i-user); mask-image: var(--ft-i-user); }
#sub-footer .ft-i-cross::before { -webkit-mask-image: var(--ft-i-cross); mask-image: var(--ft-i-cross); }
#sub-footer .ft-list strong { font-weight: 700; }
#sub-footer .ft-list li.ft-emergency { font-weight: 700; }

/* Liên kết */
#sub-footer a { color: #fff; text-decoration: none; transition: color .2s ease; }
#sub-footer a:hover,
#sub-footer a:focus { color: #ffe27a; text-decoration: none; }

/* Cột 3: mạng xã hội + lượt truy cập + huy hiệu */
#sub-footer .ft-social { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }
#sub-footer .ft-social li { margin: 0; padding: 0; }
#sub-footer .ft-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .16);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
#sub-footer .ft-social a:hover,
#sub-footer .ft-social a:focus { background: #ffe27a; transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0, 0, 0, .18); }
#sub-footer .ft-social svg { display: block; width: 22px; height: 22px; }
#sub-footer .ft-social .ft-fb svg { fill: #1877f2; }
#sub-footer .ft-social .ft-yt svg { fill: #f00; }
#sub-footer .ft-social .ft-zl svg path { fill: #0068ff; }
#sub-footer .ft-social .ft-zl svg text { fill: #fff; }
#sub-footer .ft-social a:hover svg,
#sub-footer .ft-social a:focus svg { fill-opacity: 1; }

#sub-footer .ft-counter { text-align: left; }
#sub-footer .ft-counter .DNNAlignright,
#sub-footer .ft-counter .Normal,
#sub-footer .ft-counter .Normal p { text-align: left; }
#sub-footer .ft-counter .ModLuotTruyCapC > div {
    position: relative;
    padding: 0 0 0 34px !important;
    font-size: 14px;
    line-height: 1.5;
}
#sub-footer .ft-counter .ModLuotTruyCapC > div::before { -webkit-mask-image: var(--ft-i-eye); mask-image: var(--ft-i-eye); }
#sub-footer .ft-counter .ModLuotTruyCapC .content { font-weight: 700; }
#sub-footer .ft-counter .Normal p { margin: 14px 0 0; }
#sub-footer .ft-counter .Normal img {
    display: block;
    float: none !important;
    width: 150px !important;
    max-width: 100%;
    height: auto !important;
    border-radius: 6px;
}

/* Tablet / mobile: xếp 1 cột */
@media (max-width: 991px) {
    #sub-footer { --ft-gap: 28px; padding: 30px 0 18px; }
    #sub-footer .ft-grid { grid-template-columns: minmax(0, 1fr); }
    #sub-footer .ft-main { grid-column: auto; }
    #sub-footer .ft-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) {
    #sub-footer .ft-logo { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
    #sub-footer a,
    #sub-footer .ft-social a { transition: none; }
    #sub-footer .ft-social a:hover,
    #sub-footer .ft-social a:focus { transform: none; }
}