/* Placeholder — thay bằng CSS Bootstrap gốc echula khi build Phase 6 (design fidelity) */
body { font-family: Arial, sans-serif; }
.breadcrumb { list-style: none; padding: 0; margin: 10px 0; }
.breadcrumb li { display: inline; }
.breadcrumb li + li:before { content: " > "; }

/* ==========================================================================
   Khối "Tin tức" trang chủ — thiết kế lại dạng card (theo yêu cầu cải tiến
   UI/UX của user), palette đồng bộ với popup báo giá (#1b2a4a navy + #f4c521 vàng).
   ========================================================================== */
.famicomvn-news-grid { display: flex; flex-wrap: wrap; align-items: stretch; }
.famicomvn-news-grid > [class*="col-"] { display: flex; margin-bottom: 24px; }
.famicomvn-news-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(27, 42, 74, .08);
    transition: box-shadow .2s ease, transform .2s ease;
}
.famicomvn-news-card:hover {
    box-shadow: 0 10px 26px rgba(27, 42, 74, .16);
    transform: translateY(-3px);
}
.famicomvn-news-thumb {
    display: block;
    position: relative;
    padding-top: 56%; /* tỉ lệ 16:9 cố định thay vì ảnh cao thấp lộn xộn */
    overflow: hidden;
    background: #f1f3f7;
}
.famicomvn-news-thumb img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.famicomvn-news-card:hover .famicomvn-news-thumb img { transform: scale(1.05); }

.famicomvn-news-card .blog-single { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.famicomvn-news-card .blog-single h2 { margin: 0 0 8px; font-size: 16px; line-height: 1.35; }
.famicomvn-news-card .blog-single h2 a {
    color: #1b2a4a;
    font-weight: 700;
    text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.famicomvn-news-card .blog-single h2 a:hover { color: #d0021b; }
.famicomvn-news-card .rm-decription {
    font-size: 13px; color: #6b7280; line-height: 1.6;
    margin: 0 0 14px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
.famicomvn-news-card .blogsimilarposts {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px dashed #e5e8ef;
}
.famicomvn-news-card .blogsimilarposts ul { list-style: none; margin: 0; padding: 0; }
.famicomvn-news-card .blogsimilarposts li {
    border-bottom: 1px solid #f1f3f7;
}
.famicomvn-news-card .blogsimilarposts li:last-child { border-bottom: none; }
.famicomvn-news-card .blogsimilarposts a {
    display: block;
    padding: 8px 0 8px 16px;
    position: relative;
    font-size: 13px;
    color: #33415c;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .15s ease, padding-left .15s ease;
}
.famicomvn-news-card .blogsimilarposts a:before {
    content: "\f105"; /* fa-angle-right */
    font-family: FontAwesome, sans-serif;
    position: absolute; left: 0; top: 8px;
    color: #f4c521;
    font-size: 13px;
}
.famicomvn-news-card .blogsimilarposts a:hover { color: #d0021b; padding-left: 20px; }

@media (max-width: 767px) {
    .famicomvn-news-grid > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}

/* ==========================================================================
   Trang chuyên mục bài viết (taxonomy-famicomvn_article_cat.php) — lưới card
   hiện đại (theo yêu cầu cải tiến UI/UX của user), cùng ngôn ngữ thiết kế với
   khối Tin tức trang chủ, palette navy #1b2a4a + vàng thương hiệu #f4c521.
   ========================================================================== */
.famicomvn-archive { background: #f7f8fb; padding-bottom: 60px; }
.famicomvn-archive-header {
    padding: 40px 0 28px;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}
.famicomvn-archive-header h1 { font-size: 30px; color: #1b2a4a; margin: 0 0 10px; font-weight: 800; }
.famicomvn-archive-desc { color: #6b7280; font-size: 14.5px; line-height: 1.6; margin: 0 0 10px; }
.famicomvn-archive-count {
    display: inline-block;
    background: #fff2c9;
    color: #8a6d00;
    font-size: 12.5px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
}

.famicomvn-article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-bottom: 40px;
}
@media (max-width: 991px) { .famicomvn-article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .famicomvn-article-grid { grid-template-columns: 1fr; gap: 18px; } }

.famicomvn-article-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 10px rgba(27, 42, 74, .07);
    transition: box-shadow .2s ease, transform .2s ease;
}
.famicomvn-article-card:hover {
    box-shadow: 0 12px 28px rgba(27, 42, 74, .15);
    transform: translateY(-4px);
}
.famicomvn-article-thumb {
    display: block; position: relative; padding-top: 62%;
    background: #eef0f4; overflow: hidden;
}
.famicomvn-article-thumb img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; transition: transform .35s ease;
}
.famicomvn-article-card:hover .famicomvn-article-thumb img { transform: scale(1.06); }

.famicomvn-article-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.famicomvn-article-date {
    font-size: 12px; color: #9aa3b5; font-weight: 600;
    text-transform: uppercase; letter-spacing: .03em; margin-bottom: 8px;
}
.famicomvn-article-body h2 { margin: 0 0 10px; font-size: 16.5px; line-height: 1.4; }
.famicomvn-article-body h2 a {
    color: #1b2a4a; font-weight: 700; text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.famicomvn-article-body h2 a:hover { color: #d0021b; }
.famicomvn-article-excerpt {
    font-size: 13.5px; color: #6b7280; line-height: 1.6; margin: 0 0 14px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    flex: 1;
}
.famicomvn-article-more {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700; color: #1b2a4a; text-decoration: none;
    margin-top: auto;
}
.famicomvn-article-more .fa { color: #f4c521; transition: transform .15s ease; }
.famicomvn-article-more:hover { color: #d0021b; }
.famicomvn-article-more:hover .fa { transform: translateX(3px); }

.famicomvn-pagination { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.famicomvn-pagination .page-numbers {
    min-width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px;
    background: #fff;
    color: #1b2a4a;
    font-size: 14px; font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(27, 42, 74, .1);
    padding: 0 6px;
    transition: background .15s ease, color .15s ease;
}
.famicomvn-pagination .page-numbers.current { background: #1b2a4a; color: #fff; }
.famicomvn-pagination .page-numbers:hover:not(.current) { background: #f4c521; }
.famicomvn-pagination .page-numbers.dots { box-shadow: none; background: transparent; }

/* ==========================================================================
   Trang chi tiết bài viết (single-famicomvn_article.php) — thiết kế lại chuẩn
   UI/UX hiện đại (theo yêu cầu user), cùng palette navy #1b2a4a + vàng #f4c521.
   ========================================================================== */
.famicomvn-article-page { background: #f7f8fb; padding: 40px 0 60px; }
.famicomvn-article-container { max-width: 800px; }
.famicomvn-article-single {
    background: #fff;
    border-radius: 14px;
    padding: 40px 48px 48px;
    box-shadow: 0 4px 24px rgba(27, 42, 74, .07);
}
@media (max-width: 600px) { .famicomvn-article-single { padding: 26px 20px 32px; } }

.famicomvn-article-head { text-align: center; margin-bottom: 28px; }
.famicomvn-article-tag {
    display: inline-block;
    background: #fff2c9;
    color: #8a6d00;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    padding: 5px 14px;
    border-radius: 20px;
    text-decoration: none;
    margin-bottom: 14px;
}
.famicomvn-article-head h1,
.famicomvn-article-head h1 a {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 28px; font-weight: 700; color: #1b2a4a;
    line-height: 1.35; margin: 0 0 14px;
    text-decoration: none !important;
}
@media (max-width: 600px) { .famicomvn-article-head h1 { font-size: 23px; } }
.famicomvn-article-meta {
    display: flex; justify-content: center; gap: 20px;
    font-size: 13px; color: #9aa3b5; font-weight: 600;
}
.famicomvn-article-meta .fa { color: #f4c521; margin-right: 4px; }

.famicomvn-article-hero {
    margin: 0 0 32px;
    border-radius: 10px;
    overflow: hidden;
}
.famicomvn-article-hero img { width: 100%; height: auto; display: block; }

.famicomvn-article-content {
    font-size: 16px;
    line-height: 1.85;
    color: #2c3548;
}
.famicomvn-article-content p { margin: 0 0 18px; }
.famicomvn-article-content h2,
.famicomvn-article-content h3 { color: #1b2a4a; font-weight: 700; margin: 30px 0 14px; }
.famicomvn-article-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0; }
.famicomvn-article-content a { color: #1b2a4a; font-weight: 600; text-decoration: underline; text-decoration-color: #f4c521; }
.famicomvn-article-content ul,
.famicomvn-article-content ol { padding-left: 22px; margin: 0 0 18px; }
.famicomvn-article-content blockquote {
    margin: 24px 0; padding: 16px 20px;
    border-left: 4px solid #f4c521;
    background: #f7f8fb;
    font-style: italic; color: #55617a;
    border-radius: 0 8px 8px 0;
}

.famicomvn-article-share {
    display: flex; align-items: center; gap: 10px;
    margin: 36px 0 0;
    padding-top: 24px;
    border-top: 1px solid #eef0f4;
    font-size: 13px; color: #6b7280; font-weight: 600;
}
.famicomvn-article-share a {
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f7f8fb; color: #1b2a4a;
    transition: background .15s ease, color .15s ease;
}
.famicomvn-article-share a:hover { background: #1b2a4a; color: #fff; }

.famicomvn-article-nav {
    display: flex; gap: 16px; margin-top: 24px; flex-wrap: wrap;
}
.famicomvn-article-nav-item {
    flex: 1 1 240px;
    background: #f7f8fb;
    border-radius: 10px;
    padding: 14px 16px;
    text-decoration: none;
    transition: background .15s ease;
}
.famicomvn-article-nav-item:hover { background: #fff2c9; }
.famicomvn-article-nav-next { text-align: right; }
.famicomvn-article-nav-label { display: block; font-size: 12px; font-weight: 700; color: #9aa3b5; text-transform: uppercase; margin-bottom: 4px; }
.famicomvn-article-nav-title {
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 14px; font-weight: 700; color: #1b2a4a;
}

.famicomvn-article-related { margin-top: 36px; }
.famicomvn-article-related h3 { font-size: 17px; color: #1b2a4a; font-weight: 800; margin: 0 0 16px; }
.famicomvn-article-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 600px) { .famicomvn-article-related-grid { grid-template-columns: 1fr; } }
.famicomvn-article-related-card { text-decoration: none; display: block; }
.famicomvn-article-related-thumb {
    position: relative; padding-top: 62%; border-radius: 8px; overflow: hidden; background: #eef0f4; margin-bottom: 8px;
}
.famicomvn-article-related-thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.famicomvn-article-related-card:hover .famicomvn-article-related-thumb img { transform: scale(1.06); }
.famicomvn-article-related-card span {
    font-size: 13px; font-weight: 700; color: #1b2a4a;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.famicomvn-article-comments { margin-top: 36px; padding-top: 28px; border-top: 1px solid #eef0f4; }
.famicomvn-article-comments h3 { font-size: 17px; color: #1b2a4a; font-weight: 800; margin: 0 0 18px; }

/* ==========================================================================
   Trang tĩnh (page.php) + FAQ accordion "Hỏi đáp" — thiết kế hiện đại (theo
   yêu cầu cải tiến UI/UX của user), cùng palette navy #1b2a4a + vàng #f4c521.
   ========================================================================== */
.famicomvn-page-wrap { background: #f7f8fb; padding: 40px 0 60px; }
.famicomvn-page-container { max-width: 820px; }
.famicomvn-page-card {
    background: #fff;
    border-radius: 14px;
    padding: 40px 48px 48px;
    box-shadow: 0 4px 24px rgba(27, 42, 74, .07);
}
@media (max-width: 600px) { .famicomvn-page-card { padding: 26px 20px 32px; } }
.famicomvn-page-card > h1 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 28px; font-weight: 700; color: #1b2a4a;
    text-decoration: none !important;
    margin: 0 0 8px;
}
.famicomvn-faq-intro { color: #6b7280; font-size: 14.5px; line-height: 1.6; margin: 0 0 28px; }

.famicomvn-faq-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
.famicomvn-faq-item {
    border: 1px solid #eef0f4;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .15s ease;
}
.famicomvn-faq-item.is-open { border-color: #f4c521; }
.famicomvn-faq-question {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: #fff;
    border: none;
    text-align: left;
    padding: 16px 20px;
    font-size: 14.5px; font-weight: 700; color: #1b2a4a;
    cursor: pointer;
}
.famicomvn-faq-question .fa {
    color: #9aa3b5;
    transition: transform .2s ease, color .2s ease;
    flex-shrink: 0;
}
.famicomvn-faq-item.is-open .famicomvn-faq-question .fa { transform: rotate(180deg); color: #f4c521; }
.famicomvn-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
    background: #f7f8fb;
}
.famicomvn-faq-item.is-open .famicomvn-faq-answer { max-height: 400px; }
.famicomvn-faq-answer p {
    margin: 0; padding: 16px 20px;
    font-size: 13.5px; color: #444e5e; line-height: 1.7;
}

.famicomvn-faq-ask { border-top: 1px solid #eef0f4; padding-top: 28px; }
.famicomvn-faq-ask h3 { font-size: 17px; color: #1b2a4a; font-weight: 800; margin: 0 0 16px; }

/* ==========================================================================
   Hotline nổi góc dưới trái — lấy đúng 4 số ĐT + hiệu ứng rung gốc, nhưng thiết
   kế lại responsive (bản gốc rộng cố định 500px sẽ vỡ layout trên mobile):
   mobile = nút tròn gọi nhanh, desktop = dải đầy đủ số như bản gốc.
   ========================================================================== */
.famicomvn-hotline-float {
    position: fixed;
    left: 16px;
    bottom: 18px;
    z-index: 999999;
    display: flex;
    align-items: center;
}
.famicomvn-hotline-btn {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: #fe6b00;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 21px;
    position: relative;
    box-shadow: 0 4px 14px rgba(254, 107, 0, .45);
    animation: famicomvn-hotline-wiggle 2.2s ease infinite;
    flex-shrink: 0;
}
.famicomvn-hotline-btn:before {
    content: "";
    position: absolute; inset: -6px;
    border-radius: 50%;
    border: 2px solid #fe6b00;
    opacity: .6;
    animation: famicomvn-hotline-pulse 1.8s ease-out infinite;
}
@keyframes famicomvn-hotline-pulse { 0% { transform: scale(.9); opacity: .6; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes famicomvn-hotline-wiggle {
    0%, 100% { transform: rotate(0); }
    10% { transform: rotate(-16deg); }
    20% { transform: rotate(14deg); }
    30% { transform: rotate(-10deg); }
    40% { transform: rotate(8deg); }
    50% { transform: rotate(0); }
}
.famicomvn-hotline-numbers { display: none; }
.famicomvn-hotline-btn-number { display: none; }

/* Mobile: nút tròn RANDOM 1 trong 4 số (chọn lại mỗi lần tải trang, xem footer.php)
   — hiện số đang random dưới dạng badge cam bên cạnh nút để khách biết đang gọi số nào. */
@media (max-width: 767px) {
    .famicomvn-hotline-btn { position: relative; }
    .famicomvn-hotline-btn-number {
        display: inline-flex;
        position: absolute;
        left: 60px;
        top: 50%;
        transform: translateY(-50%);
        background: #fe6b00;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        padding: 7px 14px;
        border-radius: 20px;
        white-space: nowrap;
        box-shadow: 0 4px 10px rgba(254, 107, 0, .35);
    }
}

/* Desktop/tablet: mở rộng thành dải đầy đủ số, giống bố cục gốc */
@media (min-width: 768px) {
    .famicomvn-hotline-float {
        background: #fe6b00;
        border-radius: 50px;
        padding: 3px 22px 3px 3px;
        box-shadow: 0 4px 16px rgba(254, 107, 0, .35);
    }
    .famicomvn-hotline-btn:before { display: none; }
    .famicomvn-hotline-btn-number { display: none; }
    .famicomvn-hotline-numbers {
        display: flex;
        margin-left: 10px;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;
    }
    .famicomvn-hotline-numbers a { color: #fff; text-decoration: none; }
    .famicomvn-hotline-numbers a:hover { text-decoration: underline; }
    .famicomvn-hotline-numbers span { opacity: .65; margin: 0 5px; }
}

/* Tab "Sản phẩm/Tin tức" trang chủ — dự phòng nếu CSS gốc không có sẵn rule .tab-pane */
.famicomvn-tabs .tab-pane { display: none; }
.famicomvn-tabs .tab-pane.active,
.tab-content .tab-pane.active { display: block; }
.tab-content .tab-pane:not(.active) { display: none; }

/* ==========================================================================
   Popup "Gửi yêu cầu báo giá" — nút CTA + modal (theo yêu cầu cải tiến UX/UI
   B2B của user, không phải preserve từ site gốc: site gốc không có popup này).
   Palette: xanh navy (#1b2a4a) = tin cậy/doanh nghiệp, vàng thương hiệu
   (#f4c521) = CTA nổi bật — khớp màu vàng đã dùng trong nav/menu gốc.
   ========================================================================== */

.btn-contact.famicomvn-open-lead-modal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f4c521;
    color: #1b2a4a;
    font-weight: 700;
    font-size: 15px;
    border: none;
    padding: 13px 30px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 14px;
    box-shadow: 0 4px 12px rgba(244, 197, 33, .35);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-contact.famicomvn-open-lead-modal:hover {
    background: #ffd23d;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(244, 197, 33, .45);
}
.btn-contact.famicomvn-open-lead-modal:before {
    content: "\f0e6"; /* fa-comments-o kiểu tư vấn */
    font-family: FontAwesome, sans-serif;
}

.famicomvn-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, .7);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    animation: famicomvn-fade-in .15s ease;
}
.famicomvn-modal-overlay[hidden] { display: none; }
@keyframes famicomvn-fade-in { from { opacity: 0; } to { opacity: 1; } }

.famicomvn-modal-box {
    background: #fff;
    border-radius: 10px;
    max-width: 780px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.famicomvn-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 30px 18px;
    border-bottom: 1px solid #eef0f4;
    background: #1b2a4a;
    color: #fff;
    border-radius: 10px 10px 0 0;
}
.famicomvn-modal-header h3 { margin: 0 0 4px; font-size: 20px; color: #fff; }
.famicomvn-modal-subtitle { margin: 0; font-size: 13px; color: #c7d0e6; }
.famicomvn-modal-close {
    background: rgba(255, 255, 255, .12);
    border: none; color: #fff;
    width: 32px; height: 32px; border-radius: 50%;
    font-size: 20px; line-height: 1; cursor: pointer;
    flex-shrink: 0;
    transition: background .15s ease;
}
.famicomvn-modal-close:hover { background: rgba(255, 255, 255, .25); }

.famicomvn-modal-row { display: flex; gap: 0; flex-wrap: wrap; }
.famicomvn-modal-form { flex: 1 1 340px; padding: 26px 30px; }
.famicomvn-modal-suggested {
    flex: 0 0 240px;
    background: #f7f8fb;
    padding: 26px 22px;
    border-left: 1px solid #eef0f4;
}
.famicomvn-modal-suggested h4 {
    margin: 0 0 14px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #1b2a4a;
}
@media (max-width: 640px) {
    .famicomvn-modal-suggested { border-left: none; border-top: 1px solid #eef0f4; flex-basis: 100%; }
}

/* Sản phẩm đang xem — thanh ngữ cảnh đầu form */
.famicomvn-modal-product {
    display: flex; align-items: center; gap: 12px;
    background: #f7f8fb; border-radius: 8px;
    padding: 10px 14px; margin-bottom: 20px;
}
.famicomvn-modal-product img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.famicomvn-modal-product strong { display: block; font-size: 13.5px; color: #1b2a4a; }
.famicomvn-modal-product-price { display: block; font-size: 13px; color: #d0021b; font-weight: 700; margin-top: 2px; }

/* Form fields */
.famicomvn-field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.famicomvn-field-row .famicomvn-field { flex: 1 1 160px; }
.famicomvn-field { margin-bottom: 16px; }
.famicomvn-field label {
    display: block; font-size: 13px; font-weight: 600; color: #33415c;
    margin-bottom: 6px;
}
.famicomvn-field label .fa { color: #8a94a6; margin-right: 4px; width: 14px; text-align: center; }
.famicomvn-field label .req { color: #d0021b; }
.famicomvn-field input,
.famicomvn-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d7dbe4;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    color: #1b2a4a;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.famicomvn-field input:focus,
.famicomvn-field textarea:focus {
    outline: none;
    border-color: #f4c521;
    box-shadow: 0 0 0 3px rgba(244, 197, 33, .25);
}
.famicomvn-field textarea { resize: vertical; min-height: 70px; }

.famicomvn-lead-submit {
    width: 100%;
    background: #1b2a4a;
    color: #fff;
    border: none;
    padding: 13px 20px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: background .15s ease;
}
.famicomvn-lead-submit:hover { background: #263a63; }

.famicomvn-modal-trust {
    margin: 14px 0 0;
    font-size: 12px;
    color: #8a94a6;
    text-align: center;
}
.famicomvn-modal-trust .fa { color: #2fae5b; margin-right: 3px; }

.famicomvn-lead-alert {
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 13.5px;
    margin: 0 0 16px;
}
.famicomvn-lead-alert--success { background: #eafaf0; color: #1c7d43; }
.famicomvn-lead-alert--error { background: #fdecea; color: #b3261e; }

/* Cột "Có thể bạn quan tâm" trong popup */
.famicomvn-modal-suggested-list { list-style: none; margin: 0; padding: 0; }
.famicomvn-modal-suggested-list li { margin-bottom: 14px; }
.famicomvn-modal-suggested-list li:last-child { margin-bottom: 0; }
.famicomvn-modal-suggested-list a {
    display: flex; gap: 10px; align-items: center;
    text-decoration: none; color: inherit;
    background: #fff; border-radius: 8px; padding: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    transition: box-shadow .15s ease, transform .15s ease;
}
.famicomvn-modal-suggested-list a:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, .1); transform: translateY(-1px); }
.famicomvn-modal-suggested-list img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.famicomvn-modal-suggested-info { display: flex; flex-direction: column; min-width: 0; }
.famicomvn-modal-suggested-name {
    font-size: 12.5px; font-weight: 600; color: #1b2a4a;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.famicomvn-modal-suggested-price { font-size: 12px; color: #d0021b; font-weight: 700; margin-top: 3px; }

/* ==========================================================================
   Mobile redesign — thanh danh mục nhanh dưới ô tìm kiếm (nav.menu) + hàng
   icon danh mục con trong trang danh mục (.rm-icon-accessories). Bản gốc chỉ
   có CSS cho desktop (float:12% / 7.8%, không breakpoint) nên trên mobile bị
   vỡ dòng/chữ chồng nhau — viết lại thành lưới (grid) đều, gọn, dễ bấm.
   ========================================================================== */
@media (max-width: 767px) {
    nav.menu { height: auto; padding: 10px 6px 8px; margin-bottom: 10px; }
    nav.menu .navigation { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 4px; }
    nav.menu .navigation li.menu-main { float: none; width: auto; list-style: none; }
    nav.menu .navigation li.menu-main:hover { background: transparent; }
    nav.menu .navigation li.menu-main a {
        display: flex; flex-direction: column; align-items: center;
        width: auto; padding: 0; gap: 5px;
    }
    nav.menu .navigation li.menu-main a > div {
        width: 42px; height: 42px; border-radius: 50%;
        background: #fff; display: flex; align-items: center; justify-content: center;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
    }
    nav.menu .navigation li.menu-main h3 {
        font-size: 10.5px; line-height: 12.5px; font-weight: 600;
        font-family: inherit; color: #4a3900; margin: 0; text-align: center;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden; max-width: 100%;
    }
    /* Dropdown con chỉ hoạt động bằng :hover — vô nghĩa trên cảm ứng, ẩn hẳn để tránh chiếm layout */
    nav.menu .navigation li.menu-main .menu-sub { display: none !important; }

    .sub-catogory .navigation {
        min-height: 0; padding: 16px 6px 4px; margin: 0 0 12px;
        display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 4px;
    }
    .sub-catogory .navigation a, .rm-tags .navigation a {
        width: auto; display: flex; flex-direction: column; align-items: center;
        vertical-align: top; float: none;
    }
    .rm-icon-accessories div {
        width: 56px; height: 56px; margin: 0 0 6px; background: #fff;
        border: 1px solid #f2e5b0; box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
        display: flex; align-items: center; justify-content: center; overflow: hidden;
    }
    .rm-icon-accessories div img { width: 70%; height: 70%; object-fit: contain; }
    .rm-icon-accessories a:active div { transform: scale(.94); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
    .rm-icon-accessories h3 {
        font-size: 11px; line-height: 13px; font-weight: 600; color: #3a2c00;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
}

@media (max-width: 400px) {
    nav.menu .navigation { grid-template-columns: repeat(3, 1fr); }
    .sub-catogory .navigation { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Mega-menu "Danh mục sản phẩm" — mở bằng tap trên mobile (xem mobile-menu.js).
   Bản gốc chỉ có $(...).hover() nên chạm vào không phản hồi gì; đồng thời
   .rm-menu-top vốn có width:500px cố định sẽ tràn ra ngoài màn hình điện
   thoại — giới hạn lại theo viewport. Logo được nâng z-index để không bao giờ
   bị menu (dù đang ẩn hay lỡ kẹt mở) che mất vùng bấm.
   ========================================================================== */
.rm-main-menu.rm-menu-open .dropdown-menu { display: block !important; }
.logo .rm-main-menu:first-child { position: relative; z-index: 10001; }

/* .rm-category-menu chỉ chứa 2 phần tử con float:left (span icon + h3 chữ) mà
   không hề clear — khiến chính bản thân nó co lại gần như cao 0px, vùng bấm
   thật sự chỉ còn 1 điểm nhỏ dù mắt nhìn thấy cả nút to. Thêm overflow:hidden
   để tạo block formatting context, buộc nó bao trọn các phần tử con float bên
   trong — khôi phục đúng kích thước vùng bấm bằng với những gì hiển thị. */
.rm-category-menu {
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    min-height: 40px;
}
.rm-category-menu span { float: none; display: flex; align-items: center; }
.rm-category-menu h3 { margin: 0; }

@media (max-width: 767px) {
    .rm-menu-top {
        left: 50% !important; right: auto;
        transform: translateX(-50%);
        width: calc(100vw - 24px); max-width: 360px;
        max-height: 70vh; overflow-y: auto;
    }
    .rm-menu-top:before { display: none; }
    /* Danh sách con (.rm-menu-right) bản gốc chỉ hiện khi :hover — vô nghĩa trên
       cảm ứng và quá chật để hiện flyout cạnh nhau trong popup 360px. Ẩn hẳn:
       chạm vào danh mục cha vẫn điều hướng tới đúng trang danh mục đó, nơi đã
       có sẵn hàng icon danh mục con hiển thị đầy đủ và dễ bấm hơn. */
    .rm-menu-left { float: none; width: 100%; min-height: 0; }
    .rm-menu-right { display: none !important; }
    .rm-menu-left ul li { padding: 10px 14px; }
    .rm-menu-left ul li a { font-size: 14px; }
}

/* ==========================================================================
   Tab "Sản phẩm / Tin tức" trên trang chủ (cột nhỏ cạnh slideshow) — mỗi hàng
   .item dùng col-md-3/col-md-9 (hoặc 4/8) để đặt ảnh + tiêu đề CẠNH NHAU, chỉ
   có hiệu lực từ 992px trở lên (chuẩn Bootstrap). Dưới mốc đó 2 cột tự xếp
   CHỒNG DỌC, trong khi .item lại có height:76px cố định không đổi theo màn
   hình → ảnh full-width tràn khỏi khung 76px, đè lên tiêu đề bên dưới (đúng
   lỗi thấy trên mobile). Ép lại bằng flexbox để ảnh luôn là thumbnail nhỏ cố
   định + tiêu đề nằm cạnh, không phụ thuộc việc col-md-* có ăn hay không.
   ========================================================================== */
@media (max-width: 991px) {
    .tabs .tab-content .item {
        display: flex; align-items: center; gap: 12px;
        height: auto; min-height: 0; padding: 10px 0;
    }
    .tabs .tab-content .item .col-md-3,
    .tabs .tab-content .item .col-md-9,
    .tabs .tab-content .item .col-md-4,
    .tabs .tab-content .item .col-md-8 {
        float: none; width: auto; padding: 0; min-height: 0;
    }
    .tabs .tab-content .item .col-md-3,
    .tabs .tab-content .item .col-md-4 {
        flex: 0 0 64px;
    }
    .tabs .tab-content .item .col-md-3 img,
    .tabs .tab-content .item .col-md-4 img {
        width: 64px; height: 64px; object-fit: cover; border-radius: 6px; display: block;
    }
    .tabs .tab-content .item .col-md-9,
    .tabs .tab-content .item .col-md-8 {
        flex: 1 1 auto; min-width: 0;
    }
    .tabs .tab-content .item .col-md-9 a,
    .tabs .tab-content .item .col-md-8 a {
        height: auto; font-size: 13px; line-height: 17px;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
}

/* ==========================================================================
   Gallery chi tiết sản phẩm — cột thumbnail dọc (.col-md-2, 130px/ảnh, xếp
   dọc height:100%) chỉ hợp lý khi nằm CẠNH ảnh lớn (từ 992px). Dưới mốc đó,
   2 cột xếp chồng: thumbnail dọc hiện lên TRƯỚC, đẩy ảnh lớn xuống dưới và để
   lại khoảng trắng thừa bên phải cột thumbnail hẹp. Đổi thumbnail thành hàng
   ngang cuộn được, đặt XUỐNG DƯỚI ảnh lớn — ảnh lớn luôn hiện đầu tiên, không
   còn bị "tụt" theo yêu cầu.
   ========================================================================== */
@media (max-width: 991px) {
    .rm-slide-detail .col-md-8 { display: flex; flex-direction: column; }
    /* san_pham.css có .rm-slide-detail .col-md-2{width:13%} / .col-md-10{width:87%}
       KHÔNG giới hạn theo màn hình (áp dụng mọi kích thước) — trên mobile 13%
       chỉ đủ chỗ cho đúng 1 ảnh nhỏ. Ép lại full-width ở đây. */
    .rm-slide-detail .col-md-8 > .col-md-2 { order: 2; float: none; width: 100% !important; margin-top: 12px; }
    .rm-slide-detail .col-md-8 > .col-md-10,
    .rm-slide-detail .col-md-8 > .col-md-12 { order: 1; float: none; width: 100% !important; }

    #rm-carousel-pager { height: auto; }
    #rm-carousel-pager .carousel-inner.vertical { height: auto; margin-top: 0; }
    #rm-carousel-pager .carousel-inner.vertical > .item {
        display: flex; flex-direction: row; gap: 8px;
        overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px;
    }
    #rm-carousel-pager .carousel-inner.vertical > .item img {
        width: 56px; height: 56px; flex: 0 0 56px;
        margin: 0 !important; object-fit: cover;
    }
    /* Nút mũi tên lên/xuống chỉ hợp cho hàng dọc — ẩn đi vì giờ cuộn ngang bằng tay */
    #rm-carousel-pager .carousel-control { display: none; }
}

/* ==========================================================================
   Header mobile — thiết kế lại logo/danh mục/tìm kiếm/hotline cho gọn gàng,
   khoa học hơn. Bản gốc dồn 3 khối (logo+danh mục / tìm kiếm / hotline) sát
   nhau không có nhịp điệu rõ ràng, hotline còn dính viền ngăn cách thừa (vốn
   để chia với icon giỏ hàng — site này không có giỏ hàng). Đồng thời ô tìm
   kiếm có font-size:14px khiến Safari/Chrome iOS tự động ZOOM khi chạm vào —
   chuẩn để tránh là >=16px, sửa ở đây.
   ========================================================================== */
@media (max-width: 767px) {
    #header { min-height: 0; padding: 12px 0 14px; }
    #header .container .row { display: flex; flex-direction: column; gap: 10px; }

    #header .logo.dropdown {
        display: flex; align-items: center; justify-content: space-between;
        width: 100%; padding: 0;
    }
    #header .logo .rm-main-menu { float: none; width: auto; margin-top: 0; }
    #header .rm-category-menu { padding-left: 10px; gap: 8px; }
    #header .rm-category-menu h3 { font-size: 13px; white-space: nowrap; }

    #header .search { width: 100%; padding: 0; }
    #header .search .input-group { display: flex; }
    #header .search .form-control {
        font-size: 16px; /* chặn iOS tự zoom khi focus input */
        height: 44px; border-radius: 8px 0 0 8px; border-right: none;
        flex: 1 1 auto; min-width: 0; width: auto;
    }
    /* .input-group-btn có sẵn width:1% (kiểu Bootstrap table-cell) — trong flex
       container, width:1% + flex-shrink:0 khoá luôn nút lại còn 1 sợi mảnh,
       chữ "Tìm kiếm" bị bóp mất. Ép width:auto để nút co giãn theo nội dung. */
    #header .search .input-group-btn { display: flex; flex: 0 0 auto; width: auto !important; }
    #header .search #searchdesktop {
        height: 44px; border-radius: 0 8px 8px 0; padding: 0 16px;
        display: flex; align-items: center; gap: 6px; white-space: nowrap;
    }

    /* Ẩn số hotline trong header trên mobile — đã có nút hotline nổi cố định
       ở góc dưới màn hình (footer.php) làm việc này rồi, để cả 2 gây rối mắt. */
    #header .fone-cart { display: none; }

    /* Khung gợi ý tìm kiếm vốn có width:630px/min-height:300px cố định cho
       desktop — nếu lỡ hiện trên mobile (kể cả khi có kết quả thật) sẽ tràn
       ngang và chừa khoảng trắng rất to. Giới hạn lại theo màn hình. */
    #rm-Keyword-suggestion {
        width: calc(100vw - 28px) !important;
        min-height: 0 !important;
        max-height: 60vh; overflow-y: auto;
        left: 0 !important; right: 0;
    }
}

/* Trang kết quả tìm kiếm (search.php) — trạng thái không có kết quả */
.famicomvn-search-empty {
    text-align: center; color: #4a4a4a; font-size: 15px; line-height: 1.6;
    padding: 40px 16px; max-width: 560px; margin: 0 auto;
}
.famicomvn-search-empty a { color: #d0021b; font-weight: 700; text-decoration: none; }