/**
 * Business Pro v3 — Responsive (Full)
 * Covers: all breakpoints, all custom components
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

.wraper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

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

img {
    max-width: 100%;
    height: auto;
}

table {
    max-width: 100%;
}

iframe,
video,
embed,
object {
    max-width: 100%;
}

/* ======================
   DESKTOP+ (>1240px)
   ====================== */
@media (min-width: 1241px) {
    .wraper {
        padding: 0 15px;
    }
}

/* ======================
   TABLET (<992px)
   ====================== */
@media (max-width: 991px) {

    /* Menu search hide on tablet */
    .bp-menu-search {
        display: none;
    }

    .bp-menu-main .navbar-default .navbar-nav>li>a {
        padding: 12px 12px !important;
        font-size: 12px !important;
    }

    /* Columns stack on tablet */
    .col-md-5,
    .col-md-6,
    .col-md-13,
    .col-md-14,
    .col-md-18 {
        width: 100%;
        float: none;
    }

    /* Footer columns: 2 col on tablet */
    .bp-footer-top .col-sm-8 {
        width: 50%;
    }

    /* Tables scroll */
    .table-responsive-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    figure.table {
        overflow-x: auto;
    }
}

/* ======================
   MOBILE (<768px)
   ====================== */
@media (max-width: 767px) {

    .wraper {
        padding: 0 12px;
    }

    /* --- TOP INFO BAR --- */
    .bp-info-bar {
        height: auto;
        line-height: 28px;
        padding: 4px 0;
    }

    .bp-info-nav {
        flex-wrap: wrap;
        justify-content: center;
        height: auto;
    }

    .bp-info-left,
    .bp-info-right {
        justify-content: center;
        width: 100%;
        margin-left: 0;
    }

    .bp-info-bar .contactList {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .bp-info-bar .contactList li br {
        display: none;
    }

    .bp-info-divider {
        display: none;
    }

    /* --- HEADER: Logo centered + description below --- */
    .bp-header-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* --- HEADER BANNER: Ẩn trên mobile, chỉ giữ blockchain + logo --- */
    .bp-header {
        background-image: none !important;
        background-color: #ffffff !important;
        min-height: 80px !important;
    }

    /* Ẩn overlay ::before trên mobile (không cần vì không có banner) */
    .bp-header::before {
        display: none !important;
    }

    .bp-header .logo {
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-bottom: 8px;
    }

    .bp-header .logo img {
        max-height: 50px;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .bp-brand {
        text-align: center;
    }

    .bp-brand h1 {
        font-size: 18px;
        text-align: center;
    }

    .bp-brand .bp-slogan,
    .bp-brand .site_description {
        font-size: 12px;
        text-align: center;
        display: block;
    }

    .bp-header .right-ads {
        text-align: center;
        margin-left: 0;
        width: 100%;
    }

    /* --- STICKY MENU --- */
    .bp-menu-bar.is-sticky {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }

    .bp-menu-inner {
        flex-wrap: wrap;
    }

    .bp-menu-main {
        width: 100%;
    }

    /* Mobile menu toggle */
    .bp-menu-main .navbar-toggle {
        display: block;
        color: #fff;
        margin: 8px 0;
        border-color: rgba(255, 255, 255, 0.25);
        background: rgba(255, 255, 255, 0.1);
        float: none;
    }

    .bp-menu-main .navbar-toggle .icon-bar {
        background: #fff;
    }

    .bp-menu-main .navbar-toggle:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    .bp-menu-main .navbar-collapse {
        width: 100%;
    }

    .bp-menu-main .navbar-nav {
        margin: 0;
    }

    .bp-menu-main .navbar-default .navbar-nav>li>a {
        padding: 11px 15px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        text-align: left;
    }

    .bp-menu-main .navbar-default .navbar-nav>li>a::after {
        display: none;
    }

    .bp-menu-main .dropdown-menu {
        position: static !important;
        box-shadow: none !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }

    .bp-menu-main .dropdown-menu>li>a {
        color: rgba(255, 255, 255, 0.8) !important;
        padding: 9px 15px 9px 28px !important;
        border-left: none !important;
    }

    .bp-menu-main .dropdown-menu>li>a:hover {
        background: rgba(255, 255, 255, 0.06) !important;
        color: #fff !important;
    }

    /* Menu search area */
    .bp-menu-search,
    .bp-menu-search .headerSearch {
        display: none;
    }

    /* --- BODY & CONTENT --- */
    .bp-page-body {
        padding-bottom: 20px;
    }

    /* Breadcrumb: simplified */
    .bp-breadcrumb-bar {
        padding: 6px 0;
        margin-bottom: 12px;
    }

    .current-time {
        display: none;
    }

    /* Columns stack */
    .col-md-5,
    .col-md-6,
    .col-md-13,
    .col-md-14,
    .col-md-18,
    .col-sm-6,
    .col-sm-8,
    .col-sm-12 {
        width: 100% !important;
        float: none !important;
        position: static !important;
    }

    /* Push/pull reset */
    [class*="col-sm-push-"],
    [class*="col-sm-pull-"],
    [class*="col-md-push-"],
    [class*="col-md-pull-"] {
        left: auto !important;
        right: auto !important;
    }

    /* --- SIDEBAR: push LEFT below content on mobile --- */
    .bp-page-body .row,
    #body>.row,
    .container>.row {
        display: flex !important;
        flex-direction: column !important;
    }

    /* LEFT sidebar (col-md-6) goes after content */
    .bp-page-body .row>.col-md-6,
    #body>.row>.col-md-6,
    .container>.row>.col-md-6 {
        order: 2 !important;
    }

    /* Content column (col-md-18) stays first */
    .bp-page-body .row>.col-md-18,
    #body>.row>.col-md-18,
    .container>.row>.col-md-18,
    .bp-page-body .row>.col-md-14,
    .bp-page-body .row>.col-md-13 {
        order: 1 !important;
    }

    /* RIGHT sidebar also goes after */
    .bp-page-body .row>.col-md-5,
    #body>.row>.col-md-5 {
        order: 3 !important;
    }

    /* --- NEWSCENTER: main news first on mobile --- */
    #hot-news .row {
        display: flex !important;
        flex-direction: column !important;
    }

    #hot-news .row>.col-md-14 {
        order: 1 !important;
    }

    #hot-news .row>.col-md-10,
    #hot-news .row>.hot-news-others {
        order: 2 !important;
    }

    /* Panels — headings ALWAYS visible, gradient, compact on mobile */
    .panel {
        margin-bottom: 12px;
    }

    .panel-heading {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 8px 12px !important;
        background: linear-gradient(to bottom, var(--c1), var(--c2)) !important;
        color: #fff !important;
    }

    .panel-heading h3,
    .panel-heading .panel-title,
    .panel-heading a,
    .panel-heading span {
        display: block !important;
        visibility: visible !important;
        color: #fff !important;
        font-size: 12px !important;
    }

    .panel-heading::before {
        display: block !important;
    }

    .panel-body {
        padding: 10px 12px;
    }

    /* Typography */
    h1,
    .title {
        font-size: 20px;
    }

    h2 {
        font-size: 17px;
    }

    h3 {
        font-size: 15px;
    }

    .bodytext {
        font-size: 14px;
        line-height: 1.7;
    }

    /* News detail image */
    figure.article.left>div,
    figure.article.left.noncaption {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Tables */
    figure.table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    figure.table table {
        min-width: 500px;
    }

    /* --- #TIP POPUP --- */
    #tip {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        min-width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        z-index: 99999 !important;
        overflow-y: auto;
    }

    #tip .bg {
        padding: 20px 15px;
    }

    /* --- FOOTER --- */
    .bp-footer-top .col-sm-8 {
        margin-bottom: 20px;
        width: 100%;
    }

    .bp-footer-bottom {
        flex-wrap: wrap;
        text-align: center;
    }

    .bp-footer-bottom>div {
        width: 100%;
        text-align: center !important;
        margin-bottom: 8px;
    }

    /* Footer copyright row */
    .bp-copyright-row {
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
        text-align: center;
    }

    /* Counter block compact */
    ul.counter.display-table li {
        padding: 4px 10px;
        font-size: 11px;
    }

    /* MetisMenu */
    .metismenu .sidebar-nav ul a {
        padding: 8px 14px;
        font-size: 13px;
    }

    /* Social block */
    ul.socialList li a,
    #socialList li a {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }

    /* Reading progress */
    #bp-reading-progress {
        height: 3px;
    }

    /* Back to top */
    .bp-totop,
    #bp-back-to-top {
        bottom: 15px;
        right: 12px;
        width: 34px;
        height: 34px;
        font-size: 16px;
    }

    /* Modal fullscreen */
    .modal-dialog {
        margin: 10px;
    }

    /* Sitemodal */
    #sitemodal .modal-dialog {
        width: auto;
        margin: 15px;
    }
}

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

    .wraper {
        padding: 0 8px;
    }

    body {
        font-size: 13px;
    }

    .bp-info-bar {
        font-size: 10px;
        line-height: 24px;
    }

    .bp-info-left {
        display: none;
    }

    .bp-header .logo img {
        max-height: 35px;
    }

    .bp-brand h1 {
        font-size: 16px;
    }

    h1,
    .title {
        font-size: 18px;
    }

    h2 {
        font-size: 16px;
    }

    .panel-heading {
        padding: 8px 10px !important;
        font-size: 11px !important;
    }

    .panel-body {
        padding: 8px 10px;
    }

    .bodytext {
        font-size: 13px;
        line-height: 1.65;
    }

    /* Social compact */
    ul.socialList li a,
    #socialList li a {
        width: 26px !important;
        height: 26px !important;
        font-size: 11px !important;
    }

    /* Counter */
    ul.counter.display-table li {
        padding: 3px 8px;
        font-size: 10.5px;
    }

    ul.counter.display-table li span:last-child {
        font-size: 11px;
    }

    /* Footer */
    .bp-footer-top {
        padding: 20px 0 10px;
    }

    /* Reading progress thinner */
    #bp-reading-progress {
        height: 2px;
    }

    /* Forms */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    textarea,
    select {
        font-size: 14px !important;
    }

    /* Login popup */
    #tip .bg {
        padding: 15px 10px;
    }
}

/* ======================
   USER PAGES — Responsive
   ====================== */

/* Center both login and register forms */
.centered,
.login-box {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* Panel styling for user forms */
.login-box .panel,
.user-reg-form .panel {
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #eee;
}

/* Form inputs */
.form-detail .form-control {
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    border: 1.5px solid #ddd;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-detail .form-control:focus {
    border-color: var(--c2);
    box-shadow: 0 0 0 3px rgba(52, 120, 198, 0.1);
}

/* Input group icon */
.form-detail .input-group-addon {
    border-radius: 8px 0 0 8px;
    border: 1.5px solid #ddd;
    border-right: none;
    background: #f5f6f7;
    color: var(--c2);
}

.form-detail .input-group .form-control {
    border-radius: 0 8px 8px 0;
}

/* Primary submit buttons */
.form-detail .btn-primary {
    background: linear-gradient(135deg, #4a90d9, #357abd);
    border: none;
    border-radius: 8px;
    padding: 10px 28px;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    transition: transform 0.15s, box-shadow 0.2s;
}

.form-detail .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(52, 120, 198, 0.3);
}

/* Bottom navigation links (Đăng ký, Khôi phục mật khẩu) */
#other_form a {
    display: inline-block;
    padding: 8px 14px;
    margin: 4px 6px;
    color: var(--c2);
    font-weight: 600;
    font-size: 14px;
    border-radius: 6px;
    transition: background 0.2s;
}

#other_form a:hover {
    background: rgba(52, 120, 198, 0.08);
    text-decoration: none;
}

@media (max-width: 767px) {

    .centered,
    .login-box {
        max-width: 100%;
        padding: 0 6px;
        margin: 10px auto;
    }

    /* Full-width buttons on mobile */
    .form-detail .btn {
        width: 100%;
        display: block;
        margin-bottom: 8px;
        padding: 12px 20px;
        font-size: 15px;
    }

    .form-detail .text-center .btn {
        display: block;
        width: 100%;
    }

    /* More tappable bottom links */
    #other_form {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }

    #other_form a {
        padding: 10px 16px;
        font-size: 14px;
        background: #f5f6f7;
        border-radius: 8px;
        text-align: center;
    }

    /* Panel body padding on mobile */
    .login-box .panel-body {
        padding: 18px 14px;
    }

    /* Form group spacing */
    .form-detail .form-group {
        margin-bottom: 12px;
    }

    /* Captcha responsive */
    .form-detail .captchaImg {
        max-width: 150px;
        height: auto;
    }
}

/* ======================
   PRINT
   ====================== */
@media print {

    .bp-info-bar,
    .bp-menu-bar,
    .bp-breadcrumb-bar,
    .bp-totop,
    #bp-back-to-top,
    #bp-reading-progress,
    .bp-footer-copyright,
    .bp-theme-type,
    .fix_banner_left,
    .fix_banner_right,
    .social-icons,
    .personalArea {
        display: none !important;
    }

    .bp-page-body {
        padding: 0;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    .panel {
        border: 1px solid #ccc;
        box-shadow: none;
    }
}