/*
 * responsive.css
 * Thêm khả năng responsive cho website Cảng vụ Hàng hải Nghệ An
 * Chiến lược: Override các giá trị cố định px trong style.css bằng media queries
 * Không sửa style.css gốc để tránh ảnh hưởng desktop.
 *
 * Breakpoints:
 *   Desktop  : >= 991px  (giữ nguyên style.css gốc)
 *   Tablet   : 768–990px
 *   Mobile   : <= 767px
 *   Mobile S : <= 480px
 */

/* ============================================================
   BASE: Cho phép ảnh co giãn trên mọi thiết bị
   ============================================================ */
img, table, iframe, embed, object, video {
    max-width: 100%;
    height: auto;
}

/* ============================================================
   FIX SLIDER BANNER - override width cứng 968px trong slidesBanner.css
   Chỉ override trên mobile, giữ nguyên height gốc trên desktop
   ============================================================ */
div#container,
div.Box_banner div#container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.imgSliderBanner {
    width: 100% !important;
    max-width: 100% !important;
}

/* ============================================================
   TABLET: 768px – 990px
   ============================================================ */
@media screen and (max-width: 990px) {

    /* --- Wrapper & Page --- */
    .page {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    #wrapper {
        width: 100%;
        overflow-x: hidden;
    }

    /* --- Header & Banner --- */
    #header .banner {
        width: 100% !important;
        height: auto !important;
        min-height: 80px;
    }

    #header .banner img {
        width: 100%;
        height: auto;
    }

    /* Logo */
    #txtLogo {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        display: block;
        padding: 8px 10px;
    }

    #txtLogo img {
        max-height: 70px;
        width: auto;
    }

    /* --- Menu bar --- */
    .barMenu {
        margin: 0 !important;
        height: auto !important;
        border-radius: 0 !important;
        -webkit-border-radius: 0 !important;
        -moz-border-radius: 0 !important;
        position: relative;
    }

    .barMenuMakeWhiteLine {
        width: 100% !important;
        float: none !important;
        height: auto !important;
        margin-left: 0 !important;
        box-sizing: border-box;
    }

    /* Dropdown menu horizontal → dạng thu gọn trên tablet */
    ul.dropdown {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    ul.dropdown > li {
        flex: 0 0 auto;
    }

    ul.dropdown > li > a {
        padding: 8px 8px 7px 8px !important;
        font-size: 10px !important;
    }

    /* TopMenu (ngôn ngữ, đăng nhập) */
    .TopMenu {
        float: none !important;
        text-align: right;
        padding: 4px 8px;
    }

    /* --- Content area: 3 cột → xếp dọc --- */
    #content {
        width: 100% !important;
        box-sizing: border-box;
    }

    #colLeft,
    #colRight,
    #colCenter {
        float: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        box-sizing: border-box;
        overflow: visible !important;
    }

    /* Trên tablet: hiện left/right dưới dạng horizontal band */
    #colLeft  { border-bottom: 2px solid #e8e8e8; }
    #colRight { border-top: 2px solid #e8e8e8; }

    /* --- Banner/Slider --- */
    .Box_banner,
    .slidesBanner,
    #slidesBanner {
        width: 100% !important;
        height: auto !important;
    }

    .Box_banner img,
    .slidesBanner img {
        width: 100% !important;
        height: auto !important;
    }

    /* Slider banner fix cho tablet/mobile
       Chỉ fix width của container, KHÔNG override position/height
       vì easySlider dùng position:absolute để animate */
    div#container,
    div.Box_banner div#container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* --- contentBox (hộp tin tức) --- */
    .contentBox {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* --- Search bar --- */
    #barSearch {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* --- Footer --- */
    #footer {
        width: 100% !important;
        box-sizing: border-box;
    }

    #footer table,
    #footer tr,
    #footer td {
        display: block;
        width: 100% !important;
    }

    /* --- Ảnh trong bài viết --- */
    .contentPost img,
    .contentNews img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* --- Bảng dữ liệu: cho phép scroll ngang --- */
    .StyleTable01,
    .StyleTable02 {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
    }
}

/* ============================================================
   MOBILE: <= 767px — Menu hamburger + layout stack hoàn toàn
   ============================================================ */
@media screen and (max-width: 767px) {

    body {
        font-size: 13px !important;
    }

    /* --- Hamburger button --- */
    .rsp-menu-toggle {
        display: block !important;
        position: absolute;
        top: 8px;
        right: 10px;
        z-index: 9999;
        background: #2e75a7;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        padding: 7px 10px;
        line-height: 1;
    }

    .rsp-menu-toggle span,
    .rsp-menu-toggle span::before,
    .rsp-menu-toggle span::after {
        display: block;
        width: 22px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        position: relative;
        transition: all 0.3s;
    }

    .rsp-menu-toggle span::before,
    .rsp-menu-toggle span::after {
        content: '';
        position: absolute;
        left: 0;
    }

    .rsp-menu-toggle span::before { top: -7px; }
    .rsp-menu-toggle span::after  { top:  7px; }

    /* Khi menu mở: icon X */
    .rsp-menu-toggle.open span        { background: transparent; }
    .rsp-menu-toggle.open span::before { transform: rotate(45deg); top: 0; }
    .rsp-menu-toggle.open span::after  { transform: rotate(-45deg); top: 0; }

    /* --- Menu navigation: ẩn mặc định, hiện khi toggle --- */
    .barMenu {
        position: relative;
    }

    .barMenuMakeWhiteLine {
        display: none;
        width: 100% !important;
    }

    .barMenuMakeWhiteLine.rsp-open {
        display: block !important;
    }

    /* Menu dọc trên mobile */
    ul.dropdown {
        display: block !important;
        width: 100%;
    }

    ul.dropdown > li {
        display: block !important;
        float: none !important;
        width: 100%;
        border-bottom: 1px solid #3a86ba;
        position: relative;
    }

    ul.dropdown > li > a {
        display: block !important;
        padding: 11px 14px !important;
        font-size: 13px !important;
        width: 100%;
        box-sizing: border-box;
    }

    /* Mũi tên submenu trên mobile */
    ul.dropdown > li > a.rsp-has-sub::after {
        content: '▸';
        float: right;
        font-size: 12px;
        transition: transform 0.2s;
        line-height: 1.4;
    }

    ul.dropdown > li > a.rsp-has-sub.rsp-sub-open::after {
        transform: rotate(90deg);
    }

    /* Submenu level 2: ẩn mặc định */
    ul.dropdown ul {
        position: static !important;
        display: none !important;
        visibility: visible !important;
        width: 100% !important;
        top: auto !important;
        left: auto !important;
        background-color: #1a5f8a;
    }

    ul.dropdown ul.rsp-open {
        display: block !important;
    }

    ul.dropdown ul li {
        float: none !important;
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid #2874a6;
        padding: 0 !important;
    }

    ul.dropdown ul li a {
        display: block !important;
        width: 100% !important;
        padding: 10px 20px 10px 28px !important;
        font-size: 12px !important;
        box-sizing: border-box;
    }

    /* Submenu level 3 */
    ul.dropdown ul ul {
        background-color: #0f4a70;
    }

    ul.dropdown ul ul li a {
        padding-left: 42px !important;
        font-size: 11px !important;
    }

    /* --- Header --- */
    #header {
        padding-top: 0 !important;
    }

    #header .banner {
        height: auto !important;
        min-height: 60px;
    }

    #txtLogo img {
        max-height: 55px;
    }

    /* TopMenu ẩn trên mobile nhỏ */
    .TopMenu {
        display: none;
    }

    /* --- Columns --- */
    #colLeft,
    #colCenter,
    #colRight {
        width: 100% !important;
        float: none !important;
        padding: 0 8px !important;
        box-sizing: border-box;
        margin: 0 !important;
    }

    /* Thứ tự: Center (nội dung chính) lên trước */
    #content {
        display: flex;
        flex-direction: column;
    }

    #colCenter { order: 1; }
    #colLeft   { order: 2; }
    #colRight  { order: 3; }

    /* --- Tin tức 2 cột → 1 cột --- */
    .contentBox,
    .contentPost,
    .contentNews {
        width: 100% !important;
        padding: 0 !important;
        float: none !important;
        box-sizing: border-box;
    }

    /* Thumbnail image trong tin tức */
    .contentBox img,
    .contentPost img {
        float: none !important;
        display: block;
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        margin: 0 0 8px 0 !important;
    }

    /* --- Breadcrumb, barSearch --- */
    #barSearch,
    .barSearch {
        padding: 6px 8px !important;
        box-sizing: border-box;
    }

    /* Search input */
    .barSearch input[type="text"],
    #txtSearch {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* --- Pagination --- */
    .PageLeft, .PageRight {
        float: none !important;
        display: block;
        text-align: center;
    }

    /* --- Gallery ảnh --- */
    .gallery,
    #gallery {
        width: 100% !important;
    }

    /* --- Back to top button --- */
    #Back_to_Top {
        bottom: 70px !important;
        right: 8px !important;
        width: 34px !important;
        height: 34px !important;
    }

    /* --- Fixed width elements --- */
    .txtW400,
    .txtW400x100 {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* --- Table overflow --- */
    table {
        max-width: 100%;
    }

    .StyleTable01,
    .StyleTable02,
    table.StyleTable01,
    table.StyleTable02 {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 11px !important;
    }

    /* --- Footer --- */
    #footer {
        padding: 10px !important;
    }

    #footer table {
        display: block;
        width: 100% !important;
    }

    #footer tr,
    #footer td {
        display: block;
        width: 100% !important;
        padding: 4px 0 !important;
    }
}

/* ============================================================
   MOBILE SMALL: <= 480px
   ============================================================ */
@media screen and (max-width: 480px) {

    body {
        font-size: 12px !important;
    }

    #txtLogo img {
        max-height: 45px;
    }

    /* Danh sách tin tức */
    .list li,
    .listHotNews li,
    .listHitCounter li {
        font-size: 12px !important;
    }

    /* Font size content */
    .contentPost,
    .contentNews {
        font-size: 12px !important;
        line-height: 1.6em !important;
    }

    /* Tiêu đề bài viết */
    .contentBox h2,
    .contentBox h3,
    .contentPost h1,
    .contentPost h2 {
        font-size: 14px !important;
    }

    /* Nút bấm */
    input[type="submit"],
    input[type="button"],
    .cmdButton,
    .StyleButton01 {
        width: 100% !important;
        padding: 10px !important;
        font-size: 13px !important;
        box-sizing: border-box;
    }

    /* Form fields */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    select,
    textarea {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        font-size: 14px; /* Ngăn iOS zoom khi focus */
    }

    /* Login box */
    .boxLogin {
        margin: 10px auto !important;
        width: 95% !important;
        padding: 10px !important;
    }
}

/* ============================================================
   PRINT: In ấn
   ============================================================ */
@media print {
    .barMenu,
    .barMenuMakeWhiteLine,
    #barSearch,
    #Back_to_Top,
    .rsp-menu-toggle,
    #advertHearder,
    #advertFooter,
    #colLeft,
    #colRight {
        display: none !important;
    }

    .page {
        width: 100% !important;
        box-shadow: none !important;
    }

    #colCenter {
        width: 100% !important;
        float: none !important;
    }
}