/* ============================================================
   JSEMI - footer.css
   ============================================================ */
.js-footer {
    background: var(--js-navy);
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0;
}
.js-footer-main {
    display: grid;
    grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr 1.3fr 1.1fr;
    gap: 30px;
    padding: 60px 0 40px;
}
.js-footer-company .js-footer-logo {
    font-size: 24px; font-weight: 800; color: #fff; letter-spacing: 1px; margin-bottom: 8px;
}
.js-footer-company .js-footer-logo img { display: block; height: 60px; width: auto; background: #fff; padding: 5px 8px; border-radius: 10px; box-sizing: content-box; }
.js-footer-en { font-size: 12px; color: var(--js-steel-light); margin-bottom: 10px; letter-spacing: 0.5px; }
.js-footer-stock { font-size: 13px; color: var(--js-steel-light); margin-bottom: 14px; }
.js-footer-desc { font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, 0.6); }

.js-footer-hotline { margin-top: 16px; font-size: 13px; color: rgba(255, 255, 255, 0.75); }
.js-footer-hotline i { color: var(--js-steel-light); margin-right: 6px; }
.js-footer-hotline-label { color: rgba(255, 255, 255, 0.55); margin-right: 4px; }
.js-footer-hotline strong { color: #fff; font-size: 16px; font-weight: 700; }

.js-subscribe-form { margin-top: 20px; }
.js-footer-sub-title { color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.js-footer-sub-tip { font-size: 12px; color: rgba(255, 255, 255, 0.5); margin-bottom: 10px; line-height: 1.6; }
.js-footer-sub-row { display: flex; gap: 8px; }
.js-footer-sub-row input {
    flex: 1; min-width: 0; height: 38px; padding: 0 12px;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--js-radius); color: #fff; font-size: 13px;
}
.js-footer-sub-row input::placeholder { color: rgba(255, 255, 255, 0.4); }
.js-footer-sub-row input:focus { outline: none; border-color: var(--js-steel); background: rgba(255, 255, 255, 0.12); }
.js-footer-sub-row input[aria-invalid="true"] { border-color: var(--js-red); }
.js-footer-sub-row button {
    flex: 0 0 auto; height: 38px; padding: 0 14px;
    background: var(--js-steel); border: none; border-radius: var(--js-radius);
    color: #fff; font-size: 13px; cursor: pointer; transition: var(--js-transition);
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.js-footer-sub-row button:hover { background: var(--js-navy-light); }
.js-footer-sub-row button[disabled] { opacity: .55; cursor: not-allowed; }

.js-footer-more { color: var(--js-steel-light) !important; font-size: 12px !important; margin-top: 4px; }
.js-footer-more i { margin-left: 2px; }

.js-footer-col h4 {
    color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 18px;
    position: relative; padding-bottom: 10px;
}
.js-footer-col h4::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 24px; height: 2px; background: var(--js-steel);
}
.js-footer-col a {
    display: block; padding: 6px 0; font-size: 13px; color: rgba(255, 255, 255, 0.65);
}
.js-footer-col a:hover,
.js-footer-col a:focus-visible { color: var(--js-steel-light); padding-left: 2px; }
.js-footer a:focus-visible { outline-color: var(--js-steel-light); }
.js-footer-col p { font-size: 13px; padding: 4px 0; color: rgba(255, 255, 255, 0.65); }
.js-footer-col p i { width: 16px; margin-right: 8px; color: var(--js-steel-light); }

.js-footer-qrs { display: flex; gap: 16px; }
.js-footer-qr { text-align: center; }
.js-footer-qr img {
    width: 90px; height: 90px; background: #fff; padding: 6px;
    border-radius: 6px; margin-bottom: 8px;
}
.js-footer-qr span { font-size: 12px; color: rgba(255, 255, 255, 0.6); }

.js-footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 18px 0; }
.js-footer-bottom-inner { text-align: center; }
.js-footer-bottom p { font-size: 12px; color: rgba(255, 255, 255, 0.5); }
.js-footer-bottom a { color: rgba(255, 255, 255, 0.5); }
.js-footer-bottom a:hover { color: var(--js-steel-light); }