/* ============================================================
 * responsive.css — frontpage device adaptation layer
 * Loaded AFTER style.css so these rules win where needed.
 * Mobile-first style: base rules + media queries scaling up.
 * ============================================================ */

/* ---- Universal fluid behavior ---- */
img { max-width: 100%; height: auto; }
table { max-width: 100%; }
iframe, embed, object, video { max-width: 100%; }
pre, code { white-space: pre-wrap; word-wrap: break-word; }
body { -webkit-text-size-adjust: 100%; }
.container { padding-left: 12px; padding-right: 12px; }
#container { overflow-x: hidden; }

/* ============================================================
 * CRITICAL OVERRIDE — theme's style.css hides section.ticker-news
 * on screens ≤ 991px, but THIS site has packed the main content
 * (left sidebar + news + procure + reports + right sidebar)
 * inside section.ticker-news. So we MUST force it visible on mobile.
 * Then we only hide the actual ticker bar (.ticker-news-box).
 * ============================================================ */
@media (max-width: 991px) {
    section.ticker-news { display: block !important; padding: 10px 0 30px; }
    section.ticker-news > .container { padding-left: 12px; padding-right: 12px; }
    section.ticker-news .ticker-news-box { display: none !important; } /* the long news ticker bar — fine to hide */
    /* prevent theia-sticky-sidebar (if it had run) from positioning the sidebar weirdly */
    section.ticker-news .theiaStickySidebar { position: relative !important; top: 0 !important; transform: none !important; width: 100% !important; }
    section.ticker-news .sidebar.large-sidebar { width: 100%; margin-bottom: 18px; }
    /* stack the 3 columns vertically with spacing */
    section.ticker-news .col-md-3, section.ticker-news .col-md-6 { padding-left: 12px; padding-right: 12px; margin-bottom: 8px; }
    /* normalize tables inside this section */
    section.ticker-news table.table { margin-bottom: 6px; }
    section.ticker-news .col-md-6 > br { display: none; } /* drop the stray <br><br/> spacing on mobile */
}
@media (max-width: 767px) {
    section.ticker-news .col-md-6 { padding-left: 0; padding-right: 0; }
    section.ticker-news .col-md-6 .col-md-12 { padding-left: 0; padding-right: 0; }
}

/* Stop tables / posts forcing horizontal scroll on small screens */
.qa-wrap table, .footer-widgets-part table { width: 100%; }
img[height], img[width] { height: auto !important; }
/* keep specific intentional sizes from inline styles: thumbnails inside qa-thumb img, etc. — those use width:100%/height:100% on the .qa-thumb so they're fine.  */

/* ============================================================
 * Top navbar — replace fixed image heights with responsive rules
 * ============================================================ */
.top-line { padding: 8px 0; }
.brand-col { padding: 4px 0; }
.brand-logo { height: 120px; max-width: 100%; }
.brand-actions { padding: 4px 0; }
.brand-action-img { height: 130px; max-width: 100%; margin: 0 2px; vertical-align: middle; }
.navbar-toggle-logo { width: 80%; max-width: 200px; height: auto; }

@media (max-width: 991px) {
    .brand-logo { height: 90px; }
    .brand-action-img { height: 96px; }
}
@media (max-width: 767px) {
    .brand-col { text-align: center; }
    .brand-actions { text-align: center !important; }
    .brand-logo { height: 72px; }
    .brand-action-img { height: 64px; margin: 4px 2px; }
}
@media (max-width: 480px) {
    .brand-logo { height: 60px; }
    .brand-action-img { height: 52px; }
}

/* Hide the duplicate inline navbar-toggle <img> on mobile (real toggle button stays) */
@media (max-width: 767px) {
    .navbar-toggle-logo { display: none !important; }
}

/* Make the collapsed navbar items full-width and tappable */
.nav-list-container .navbar-collapse .nav > li > a,
.nav-list-container .navbar-collapse a {
    padding-top: 10px; padding-bottom: 10px;
}
@media (max-width: 767px) {
    .nav-list-container .navbar-collapse .nav > li > a {
        padding: 12px 14px;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    .nav-list-container .navbar-collapse .dropdown-menu { box-shadow: none; padding-left: 14px; }
}

/* ============================================================
 * Sidebars — left (about/personnel/plans) + right (stats)
 * Stack rows neatly on mobile; keep buttons tappable
 * ============================================================ */
.sidebar { margin-bottom: 16px; }
.sidebar .btn.form-control {
    height: auto;
    line-height: 1.4;
    padding: 10px 12px;
    margin: 8px 0 0;
    border-radius: 6px;
    white-space: normal;
    font-size: 15px;
}
.sidebar table.table { margin-bottom: 6px; border: 1px solid #e3e6ea; }
.sidebar table.table td { padding: 8px 10px; font-size: 14px; word-break: break-word; }
.sidebar table.table td a { text-decoration: none; color: #2b3a4a; display: inline-block; padding: 2px 0; }
.sidebar table.table td a:hover { color: #0ea5e9; }

/* Right tag stats block tables sometimes layout-cramped on mobile */
.review-widget table td { padding: 6px 8px; }
.review-widget table td img { max-width: 150px; height: auto; }

/* Stack site stats columns when very narrow */
@media (max-width: 380px) {
    .review-widget table table tr td { display: block; width: 100%; text-align: left !important; }
    .review-widget table table tr td.text-right { text-align: left !important; }
}

/* ============================================================
 * Site visit statistics widget — modern card redesign
 * (right_tage_view.php "สถิติการเยี่ยมชม" block)
 * ============================================================ */
.stats-widget {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    margin-bottom: 18px;
    font-family: inherit;
}
.stats-widget-header {
    background: linear-gradient(135deg, #0ea5e9 0%, #04415e 100%);
    color: #fff;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    letter-spacing: 0.3px;
}
.stats-widget-header i { margin-right: 6px; }
.stats-widget-body { padding: 12px; }

/* Online users hero — green pulse card */
.stats-online {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    border-radius: 10px;
    padding: 14px 12px;
    margin-bottom: 14px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(16,185,129,0.25);
}
.stats-online-pulse { font-size: 13px; opacity: 0.95; margin-bottom: 6px; }
.stats-online-pulse .dot {
    display: inline-block;
    width: 9px; height: 9px;
    background: #fff;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: middle;
    box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
    animation: stats-pulse 1.8s infinite;
}
@keyframes stats-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.stats-online-num { font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: 0.5px; }
.stats-online-num span { font-size: 13px; font-weight: 600; opacity: 0.9; margin-left: 2px; }
.stats-online-start { font-size: 11px; opacity: 0.88; margin-top: 6px; }
.stats-online-start i { margin-right: 3px; }

/* Stats rows */
.stats-list { list-style: none; padding: 0; margin: 0 0 12px; }
.stats-list li {
    display: flex;
    align-items: center;
    padding: 9px 8px;
    border-bottom: 1px dashed #e7eaee;
    transition: background 0.15s;
}
.stats-list li:last-child { border-bottom: none; }
.stats-list li:hover { background: #f8fafc; }

.stats-icon {
    width: 34px; height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 11px;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.stats-icon.ico-today      { background: #3b82f6; }
.stats-icon.ico-yesterday  { background: #8b5cf6; }
.stats-icon.ico-month      { background: #06b6d4; }
.stats-icon.ico-lastmonth  { background: #64748b; }
.stats-icon.ico-year       { background: #f59e0b; }
.stats-icon.ico-total      { background: #ef4444; }

.stats-label { flex: 1; color: #475569; font-size: 13px; font-weight: 500; }
.stats-value {
    font-weight: 800;
    color: #1a2540;
    font-size: 14px;
    min-width: 60px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* "ทั้งหมด" row — emphasized */
.stats-list li.stats-total {
    background: #fef2f2;
    border: 1px solid #fee2e2;
    border-radius: 8px;
    padding: 10px 8px;
    margin-top: 6px;
}
.stats-list li.stats-total .stats-label { color: #991b1b; font-weight: 700; }
.stats-list li.stats-total .stats-value { color: #dc2626; font-size: 15px; }
.stats-list li.stats-total:hover { background: #fee2e2; }

/* IP footer */
.stats-ip {
    background: #f1f5f9;
    color: #475569;
    border-radius: 8px;
    padding: 9px 10px;
    text-align: center;
    font-size: 12px;
    border: 1px dashed #cbd5e1;
}
.stats-ip i { color: #ef4444; margin-right: 4px; }
.stats-ip b { color: #0ea5e9; font-weight: 700; }

/* Mobile fine-tuning */
@media (max-width: 380px) {
    .stats-widget-body { padding: 10px; }
    .stats-online-num { font-size: 22px; }
    .stats-icon { width: 30px; height: 30px; line-height: 30px; font-size: 13px; margin-right: 9px; }
    .stats-label { font-size: 12px; }
    .stats-value { font-size: 13px; }
}

/* ============================================================
 * Footer
 * ============================================================ */
.footer-logo { width: 125px; max-width: 60%; height: auto; }
.footer-widget p { word-break: break-word; }
.footer-last-line { padding: 10px 0; }
.footer-nav ul { padding: 0; margin: 0; list-style: none; }
.footer-nav ul li { display: inline-block; margin: 0 8px; }
@media (max-width: 767px) {
    .footer-last-line .text-center-xs { text-align: center !important; }
    .footer-nav ul li { margin: 4px 6px; }
}

/* ============================================================
 * Home / main view
 * - banner slider images
 * - news cards / post images
 * - section titles
 * ============================================================ */
.heading-news2 .bxslider li img,
.bxslider li img { width: 100%; height: auto !important; max-height: 480px; object-fit: cover; }
@media (max-width: 991px) { .bxslider li img { max-height: 360px; } }
@media (max-width: 767px) { .bxslider li img { max-height: 240px; } }
@media (max-width: 480px) { .bxslider li img { max-height: 180px; } }

/* Ticker breaking news */
.ticker-news-box, #js-news { max-width: 100%; }
.ticker-news-box .news-item { padding-right: 4px; }
.ticker-news-box .time-news { font-size: 12px; }
@media (max-width: 767px) {
    .ticker-news-box .breaking-news, .ticker-news-box .new-news { display: block; margin-bottom: 4px; }
}

/* Generic content thumbnail images that had height="300/165/450" inline:
   our universal `img[height]` reset already neutralizes them.
   Add max-height caps so layouts don't blow up on portrait images. */
.image-post img, .image-grid img, .single-post img { max-height: 480px; object-fit: cover; }

/* ============================================================
 * Page content general
 * ============================================================ */
section, .block-wrapper { padding-left: 0; padding-right: 0; }
.col-sm-9, .col-sm-3, .col-md-3, .col-md-9 { padding-left: 12px; padding-right: 12px; }

/* When the right_tag column is shown on mobile, give it spacing */
@media (max-width: 767px) {
    .col-sm-3 { margin-top: 16px; }
}

/* Forms inside e-service pages get wider tap targets and full-width inputs */
input.form-control, select.form-control, textarea.form-control {
    font-size: 15px;
}
@media (max-width: 767px) {
    .form-horizontal .control-label { text-align: left !important; padding-top: 4px; }
    .form-horizontal .form-group > div { padding-left: 15px; padding-right: 15px; }
    .btn, button.btn { padding: 10px 16px; font-size: 15px; }
    .btn-lg { padding: 12px 20px; }
}

/* ============================================================
 * Tables in content area — make horizontally scrollable instead of breaking
 * ============================================================ */
.content-wrapper table, section table.data-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Cookie message popup — sometimes covers too much on mobile */
.cookieMessageContainer { font-size: 13px !important; }
@media (max-width: 480px) {
    .cookieMessageContainer { font-size: 12px !important; padding: 10px !important; }
    .cookieMessageContainer a.acceptButton { display: block; margin: 8px auto 0 !important; }
}

/* Black mourning ribbons — already responsive via inline rule, but tighten very small */
@media (max-width: 380px) {
    .black-ribbon { width: 52px !important; }
}

/* Print: hide fixed/floating elements */
@media print {
    #back-top, .floating-menu, .black-ribbon, #fb-customer-chat, .cookieMessageContainer { display: none !important; }
    body { color: #000 !important; background: #fff !important; }
}

/* ============================================================
 * Broken-image fallback — laws/reviews/datacenter rows where
 * {pic} is empty render as <img src="<base_url>/"> (just root URL)
 * which the browser shows as a broken-image icon. Replace with a
 * neutral document-icon tile across ALL screen sizes.
 * ============================================================ */
.review-posts-list li img[src=""],
.review-posts-list li img:not([src]),
ul.review-posts-list li a img[src$="kaongiw.go.th/"],
ul.review-posts-list li a img[src$="kaongiw.go.th"],
ul.review-posts-list li a img[src$="localhost/kaongiw/"],
ul.review-posts-list li a img[src$="/"] {
    /* Turn the broken <img> into a neutral colored tile in-place */
    width: 56px !important;
    height: 56px !important;
    background: #e7f0f7 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%231e40af"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM6 20V4h7v5h5v11H6z"/></svg>') center/26px no-repeat;
    color: transparent !important;
    font-size: 0 !important;
    border: 1px solid #d6e0eb;
    border-radius: 6px;
    /* hides the browser's default broken-image glyph */
    text-indent: -9999px;
    overflow: hidden;
}

/* On mobile: float-left 56px tile with text alongside */
@media (max-width: 767px) {
    ul.review-posts-list li a img[src$="/"] {
        float: left;
        margin-right: 10px;
        margin-bottom: 6px;
    }
}
/* On desktop (this widget sits in the right sidebar): center icon above text */
@media (min-width: 768px) {
    ul.review-posts-list li { text-align: center; padding: 10px 6px; }
    ul.review-posts-list li a img[src$="/"] {
        display: inline-block !important;
        float: none !important;
        margin: 0 auto 6px !important;
    }
    ul.review-posts-list li h2 { font-size: 13px; margin: 4px 0; color: #1a2540; }
    ul.review-posts-list li .date { display: block; font-size: 11px; color: #6c757d; margin-top: 2px; }
}

/* ============================================================
 * Announcement list (procurement / report) cards on mobile
 * Original .list-posts1 layout floats a small image next to text;
 * on phones we want vertical comfortable layout.
 * ============================================================ */
@media (max-width: 767px) {
    .list-posts1 li { padding: 8px 0; border-bottom: 1px dashed #e3e6ea; display: block; }
    .list-posts1 li img { float: none; width: 56px; height: auto; margin-right: 10px; vertical-align: middle; }
    .list-posts1 li .post-content { display: inline-block; vertical-align: middle; max-width: calc(100% - 75px); }
    .list-posts1 li .post-content h2 { font-size: 14px; line-height: 1.4; margin: 0 0 4px; }
    .list-posts1 li .post-content h2 a { color: #1a2540; }
    .list-posts1 li .post-content ul.post-tags { padding: 0; margin: 0; font-size: 12px; color: #6c757d; }
    .list-posts1 li .post-content ul.post-tags li { display: inline; margin-right: 8px; }

    .review-posts-list { padding: 0; list-style: none; }
    .review-posts-list li { padding: 8px 6px; border-bottom: 1px dashed #e3e6ea; }
    .review-posts-list li a { text-decoration: none; color: #1a2540; display: block; }
    .review-posts-list li img { width: 56px; height: auto; float: left; margin-right: 10px; }
    .review-posts-list li h2 { font-size: 14px; line-height: 1.3; margin: 0; color: #1a2540; }
    .review-posts-list li .date { font-size: 11px; color: #6c757d; }

    /* News slider on mid column — keep its image fluid, captions readable */
    section.ticker-news .image-slider .news-post.image-post img { width: 100%; max-height: 240px; object-fit: cover; }
    section.ticker-news .image-slider .news-post .hover-box .inner-hover { padding: 8px 12px; }
    section.ticker-news .image-slider .news-post .hover-box .inner-hover h2 { font-size: 15px; line-height: 1.3; }

    /* Section card titles (the dark blue <th> headers) */
    section.ticker-news .table thead tr th { padding: 8px 10px; font-size: 14px; }
    section.ticker-news .table tbody tr td { padding: 8px 10px; }
}