/* ==========================================================================
   SGW Website - Responsive Stylesheet for Tablet and Mobile
   Designed to make sgw.co.th fully responsive without impacting Desktop view.
   (Desktop layout >= 1025px remains 100% untouched)
   ========================================================================== */

/* Hide mobile toggle on desktop by default */
.mobile-nav-toggle {
    display: none;
}

/* ==========================================================================
   Tablet and Mobile Devices (<= 1024px)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    *, *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        -webkit-text-size-adjust: 100%;
    }

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

    /* Container & Wrapper */
    #container {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    #wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }

    /* Header */
    #header {
        width: 100% !important;
        height: auto !important;
        min-height: 68px !important;
        overflow: visible !important;
        position: relative !important;
        background: #081926 !important;
        border-bottom: 2px solid #0c9adc !important;
    }

    #header .innerHeader {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 15px !important;
        position: relative !important;
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-align-items: center !important;
        align-items: center !important;
        -webkit-justify-content: space-between !important;
        justify-content: space-between !important;
        box-sizing: border-box !important;
    }

    .logo {
        float: none !important;
        margin: 0 !important;
        max-width: 60% !important;
    }

    .logo img {
        max-height: 48px !important;
        width: auto !important;
        display: block !important;
        max-width: 100% !important;
    }

    /* Hamburger Toggle Button */
    .mobile-nav-toggle {
        display: block !important;
        width: 44px !important;
        height: 44px !important;
        background: #002f49 !important;
        border: 1px solid #0c9adc !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        padding: 9px 8px !important;
        position: relative !important;
        z-index: 100000 !important;
        outline: none !important;
        transition: all 0.25s ease-in-out !important;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-nav-toggle:hover, .mobile-nav-toggle:active {
        background: #005482 !important;
    }

    .mobile-nav-toggle span {
        display: block !important;
        width: 100% !important;
        height: 3px !important;
        background-color: #ffffff !important;
        margin: 5px 0 !important;
        border-radius: 2px !important;
        transition: all 0.25s ease-in-out !important;
    }

    .mobile-nav-toggle.open span:nth-child(1) {
        -webkit-transform: translateY(8px) rotate(45deg) !important;
        transform: translateY(8px) rotate(45deg) !important;
    }
    .mobile-nav-toggle.open span:nth-child(2) {
        opacity: 0 !important;
    }
    .mobile-nav-toggle.open span:nth-child(3) {
        -webkit-transform: translateY(-8px) rotate(-45deg) !important;
        transform: translateY(-8px) rotate(-45deg) !important;
    }

    /* Main Navigation Dropdown */
    #navMain {
        display: none !important;
        float: none !important;
        width: 100% !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: #071926 !important;
        z-index: 99999 !important;
        border-top: 1px solid #0c9adc !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7) !important;
    }

    #navMain.open {
        display: block !important;
    }

    #navMain ul {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 5px 0 !important;
    }

    #navMain li {
        float: none !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        background: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    #navMain li:last-child {
        border-bottom: none !important;
    }

    #navMain li a {
        text-indent: 0 !important;
        display: block !important;
        height: auto !important;
        padding: 13px 20px !important;
        font-family: Tahoma, Arial, sans-serif !important;
        font-size: 15px !important;
        font-weight: bold !important;
        color: #d1e7f5 !important;
        text-decoration: none !important;
        transition: background 0.2s, color 0.2s, padding-left 0.2s;
    }

    #navMain li:hover a,
    #navMain li.active a {
        background: #005482 !important;
        color: #fbf78a !important;
        padding-left: 26px !important;
    }

    /* Hilight Banner Slider */
    #hilight {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        position: relative !important;
    }

    #slideHilight, #slides, #slideAbout {
        left: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        z-index: 1 !important;
    }

    #slideHilight .slides_container, #slides .slides_container {
        height: 320px !important;
        width: 100% !important;
    }

    #slideAbout .slides_container {
        height: 220px !important;
        width: 100% !important;
    }

    .slides_control {
        width: 100% !important;
        left: 0 !important;
        height: 100% !important;
    }

    .slides_control > div, .slides_control .slide {
        width: 100% !important;
        height: 100% !important;
        left: 0 !important;
    }

    .slides_control img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    #slideHilight .next, #slideHilight .prev,
    #slides .next, #slides .prev,
    #slideAbout .next, #slideAbout .prev {
        margin-left: 0 !important;
        margin-top: -25px !important;
        top: 50% !important;
        z-index: 10 !important;
        width: 50px !important;
        height: 50px !important;
    }

    #slideHilight .prev, #slides .prev, #slideAbout .prev {
        left: 10px !important;
    }

    #slideHilight .next, #slides .next, #slideAbout .next {
        left: auto !important;
        right: 10px !important;
    }

    /* Inner Page Hilight Banners */
    .hlProduct, .hlAbout, .hl-job, .hlContact, .hlService {
        height: 180px !important;
        background-size: cover !important;
        background-position: center !important;
    }

    /* Layout Containers */
    #twoCol, #home {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    #twoCol .colLeft, #twoCol .mainContent,
    #home #boxOptions, #home .contentRight {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        background: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    #twoCol .mainContent {
        min-height: auto !important;
        padding: 20px 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Options Box (Left column content) */
    #boxOptions {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 0 !important;
    }

    #boxOptions ul {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 15px;
    }

    #boxOptions li {
        width: 100% !important;
        margin-bottom: 15px !important;
    }

    #boxOptions .contentBox {
        width: auto !important;
        float: none !important;
        overflow: hidden !important;
    }

    #boxOptions .rank {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 15px;
    }

    #boxOptions .rank .left {
        float: none !important;
    }

    #boxOptions .rank ul {
        width: 100% !important;
        float: none !important;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8px 15px;
    }

    #boxOptions .rank li {
        width: 45% !important;
        margin: 0 !important;
    }

    /* Home Page Accordion -> Responsive Cards on <= 1024px */
    .contentRight {
        padding: 20px 0 !important;
    }

    .contentRight .accordion {
        width: 100% !important;
        height: auto !important;
        position: static !important;
        overflow: visible !important;
        margin: 15px 0 !important;
        display: -webkit-flex !important;
        display: flex !important;
        -webkit-flex-wrap: wrap !important;
        flex-wrap: wrap !important;
        gap: 16px !important;
    }

    .contentRight .accordion li {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: calc(50% - 8px) !important;
        height: auto !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
        border-radius: 6px !important;
        overflow: hidden !important;
        background: #071926 !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        cursor: default !important;
    }

    .contentRight .accordion li img {
        width: 100% !important;
        height: 220px !important;
        object-fit: cover !important;
        display: block !important;
    }

    .contentRight .accordion li .caption {
        position: static !important;
        display: block !important;
        width: 100% !important;
        background: #012237 !important;
        color: #c9d6df !important;
        padding: 12px 14px !important;
        border-radius: 0 !important;
        box-sizing: border-box !important;
    }

    .contentRight .accordion li .caption span {
        color: #0c9adc !important;
        font-size: 14px !important;
        font-weight: bold !important;
        margin-bottom: 4px !important;
        display: block !important;
    }

    /* About Page */
    #about .contentLeft, #about .contentRight {
        width: 100% !important;
        float: none !important;
        margin-bottom: 20px !important;
    }

    /* Product Pages */
    #product .mainProduct {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 12px;
    }

    #product .mainProduct li {
        float: none !important;
        width: calc(50% - 6px) !important;
        height: auto !important;
        min-height: 120px !important;
        margin: 0 !important;
        background-size: cover !important;
    }

    #navProduct .listOther .accordion,
    #navProduct .listOther .accordion div {
        width: 100% !important;
    }

    #product .detailProduct ul {
        margin: 0 0 0 20px !important;
    }

    /* Service Page */
    #service .customerSer {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 10px;
    }

    #service .customerSer li {
        float: none !important;
        width: calc(33.333% - 7px) !important;
        margin: 0 !important;
    }

    /* Contact Page */
    #contact .col-one,
    #contact .col-two,
    #contact .col-three {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px 0 !important;
        background: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    #contact .formField input,
    #contact .formField textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #contact .map iframe,
    #contact .map img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* Job Page */
    #job .contentJob, #job .jobList {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #job .icoLeft {
        float: none !important;
        margin-bottom: 12px !important;
    }

    /* Job Application Form */
    #job .formField table {
        width: 100% !important;
        max-width: 100% !important;
    }

    #job .formField input[type="text"],
    #job .formField select,
    #job .formField textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #job .formField .btn-submit-row {
        padding-left: 0 !important;
        text-align: center !important;
    }

    /* Table Responsive Wrapper */
    .table-responsive {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 15px !important;
    }

    /* Footer */
    #footer {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 15px !important;
        text-align: center !important;
    }

    .copyright, .navFooter {
        float: none !important;
        text-align: center !important;
        display: block !important;
        margin: 6px 0 !important;
    }
}

/* ==========================================================================
   Mobile Devices (<= 600px)
   ========================================================================== */
@media screen and (max-width: 600px) {
    #slideHilight .slides_container, #slides .slides_container {
        height: 200px !important;
    }

    #slideAbout .slides_container {
        height: 160px !important;
    }

    .hlProduct, .hlAbout, .hl-job, .hlContact, .hlService {
        height: 140px !important;
    }

    .contentRight .accordion li {
        width: 100% !important;
    }

    .contentRight .accordion li img {
        height: 190px !important;
    }

    #product .mainProduct li {
        width: 100% !important;
    }

    #service .customerSer li {
        width: calc(50% - 5px) !important;
    }

    #boxOptions .rank li {
        width: 100% !important;
    }

    /* Stack form fields in job table */
    #job .formField td {
        display: block !important;
        width: 100% !important;
        padding: 4px 0 !important;
    }

    #job .formField td table td {
        display: table-cell !important;
        width: auto !important;
        padding: 2px 8px 2px 2px !important;
    }

    #job .formField input[type="file"] {
        max-width: 100% !important;
        width: 100% !important;
    }
}