/* ============================================================
   responsive.css — vienco.com.vn (skin: user/finance)
   ĐẶT TẠI: skins/user/finance/css/responsive.css  (nạp CUỐI CÙNG)
   ============================================================ */

/* 0. Chuẩn hộp + chống trà n ngang */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100%; }

/* 1. Khung chính co giãn */
.wrapper { width: 100% !important; max-width: 970px !important; margin: 0 auto !important; padding: 0 12px !important; }

/* 2. Ảnh/khung nhúng co theo cột */
img, video, iframe, embed, object { max-width: 100% !important; height: auto !important; }

/* 3. SLIDER co giãn */
#sliderFrame { width: 100% !important; max-width: 940px !important; }
.slide { height: auto !important; }

/* 4. Nút hamburger (ẩn ở desktop) */
.bw-menu-toggle { display: none; }
.bw-menu-toggle .bw-burger { display: inline-block; width: 24px; vertical-align: middle; margin-right: 8px; }
.bw-menu-toggle .bw-burger i { display: block; height: 3px; background: #fff; margin: 4px 0; border-radius: 2px; }

/* ============================================================
   TABLET + MOBILE  (<= 992px)
   ============================================================ */
@media (max-width: 992px) {
    .wrapper { max-width: 100% !important; }

    /* ---------- MENU HAMBURGER ---------- */
    .menu { height: auto !important; }
    .menu .navbar { min-height: 0 !important; margin: 0 !important; border: 0 !important; }
    .menu .navbar-default { border: 0 !important; }
    .bw-menu-toggle {
        display: block; width: 100%;
        background: #02A650; color: #fff; border: 0;
        padding: 12px 16px; font-size: 16px; font-weight: bold;
        text-align: left; cursor: pointer;
    }
    .menu .navbar-collapse {
        display: none !important; height: auto !important; max-height: none !important;
        margin: 0 !important; padding: 0 !important; box-shadow: none !important; background: #fff;
    }
    .menu.bw-open .navbar-collapse { display: block !important; }
    .menu .navbar-nav { height: auto !important; margin: 0 !important; float: none !important; }
    .menu .navbar-nav > li { float: none !important; border-top: 1px solid #e0e0d6; }
    .menu .navbar-nav > li > a { padding: 12px 16px !important; }
    .menu .navbar-nav .dropdown-menu {
        position: static !important; float: none !important; width: 100% !important;
        border: 0 !important; box-shadow: none !important; background: #f4f4f4 !important;
        display: block !important; margin: 0 !important;
    }
    .menu .navbar-nav .dropdown-menu > li > a { padding: 10px 16px 10px 34px !important; }

    /* ---------- Lưới thẻ -> 2 thẻ/hà ng ---------- */
    .left-top { display: flex; flex-wrap: wrap; justify-content: space-between; }
    .li-home, .li-home2 { width: 48% !important; margin-right: 0 !important; height: auto !important; }

    /* ---------- 2 cột bà i viết -> 1 cột ---------- */
    .ct-left, .ct-right, .ct-right2 { width: 100% !important; float: none !important; }

    /* ---------- KHỐI TIN NỔI BẬT: full-width, ảnh nổi trái, KHÔNG đè ---------- */
    .left-bot, .left-bot2 {
        width: 100% !important;
        float: none !important;
        clear: both !important;          /* mỗi khối xuống dòng riêng */
        margin: 0 0 14px !important;
        min-height: 0 !important;
        overflow: hidden;                /* bao ảnh float bên trong */
    }
    /* Ảnh nổi trái để chữ bao quanh, lấp đầy chiều rộng (không bị trống phải) */
    .left-bot img, .left-bot2 img {
        float: left !important;
        width: 183px !important;         /* giữ ảnh gọn bên trái */
        height: auto !important;
        margin: 0 14px 8px 0 !important;
    }
    /* Tiêu đề mục luôn bắt đầu dòng mới -> hết chèn đè */
    .title-news { clear: both !important; }

    .pikachoose, .pika-stage, .pika-textnav { width: 100% !important; }
    .pika-stage img { width: 100% !important; height: auto !important; }
}

/* ============================================================
   MOBILE  (<= 768px)
   ============================================================ */
@media (max-width: 768px) {
    .li-home, .li-home2,
    .supp, .link, .share, .wrap {
        width: 100% !important; float: none !important;
        margin-right: 0 !important; height: auto !important;
    }
    .search, .input-search, #formSearch #keyword { width: 100% !important; }
    .form-horizontal, .form_tuvan { width: 100% !important; margin-left: 0 !important; }
    .form_tuvan label { width: 100% !important; float: none !important; }
    .cat-content > img { float: none !important; display: block; margin: 0 0 10px 0 !important; }
    h1 { font-size: 22px !important; } h2 { font-size: 19px !important; }
    .block-title, .title-news { font-size: 16px !important; }
    .jssort03 { display: none !important; }
}

/* ============================================================
   MOBILE NHỎ  (<= 480px): ảnh tin nổi bật về full-width cho dễ xem
   ============================================================ */
@media (max-width: 480px) {
    .li-home, .li-home2 { width: 100% !important; }
    .left-bot img, .left-bot2 img { float: none !important; display: block; width: 100% !important; max-width: 280px; margin: 0 0 8px 0 !important; }
}