/* ── Layout กลาง (header + footer) — ยกมาจาก header.inc.php / footer.inc.php ของเว็บเดิม ── */

/* ===== Header ===== */
    .container {
        max-width: 1300px;
    }

    .form-control:focus {
        border-color: #017acc !important;
        outline-color: #017acc !important;
        box-shadow: none !important;
    }

    a:hover {
        text-decoration: unset !important;
    }

    a:active {
        text-decoration: unset !important;
    }

    .stepwizard-step p {
        margin-top: 0px;
        color: #666;
    }

    .stepwizard-row {
        display: table-row;
    }

    .stepwizard {
        display: table;
        width: 100%;
        position: relative;
    }

    .stepwizard-step button[disabled] {
        /*opacity: 1 !important;
    filter: alpha(opacity=100) !important;*/
    }

    .stepwizard .btn.disabled,
    .stepwizard .btn[disabled],
    .stepwizard fieldset[disabled] .btn {
        opacity: 1 !important;
        color: #bbb;
    }

    .stepwizard-row:before {
        top: 35px;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 100%;
        height: 1px;
        background-color: #ccc;
        z-index: 0;
    }

    .stepwizard-step {
        display: table-cell;
        text-align: center;
        position: relative;
    }

    .btn-circle {
        width: 60px;
        height: 60px;
        text-align: center;
        padding: 16px 0;
        font-size: 18px;
        line-height: 1.428571429;
        border-radius: 30px;
    }

    .drawer-hamburger-icon {
        background-color: #5d5d5d !important;
    }

    .drawer-hamburger-icon:before {
        background-color: #5d5d5d !important;
    }

    .drawer-hamburger-icon:after {
        background-color: #5d5d5d !important;
    }

    /* ย่อ hamburger บนมือถือให้ขนาดใกล้ธงเปลี่ยนภาษา (23px) ที่วางข้างกัน
       selector ต้องเขียนแบน ห้าม nest เพราะ .drawer-open .drawer-hamburger-icon:before/:after
       ของ drawer.min.css มี specificity 0,2,1 ถ้า nest จะเท่ากันแล้วชนะเพราะมาทีหลัง
       ทำให้ตอนเปิดเมนูเส้นไม่รวมกันเป็นกากบาท */
    @media only screen and (max-width: 767px) {
        .nav-busandvan {
            --hamburger-width: 1.4rem;
            --hamburger-space-x: .5rem;
            --hamburger-bar-gap: 7px;
        }

        /* ปุ่มเป็น position:fixed top:0 ไม่ได้อยู่ใน flow ของ navbar
           ให้สูงเท่าแถบแล้วจัด icon กลางด้วย flex จะได้ไม่ต้องไล่คำนวณ padding เอง */
        .drawer-hamburger {
            display: flex;
            align-items: center;
            width: var(--hamburger-width);
            height: 60px;
            padding: 10px 18px;
        }

        .drawer-hamburger-icon {
            margin-top: 0;
        }

        .drawer-hamburger-icon:before {
            top: calc(var(--hamburger-bar-gap) * -1);
        }

        .drawer-hamburger-icon:after {
            top: var(--hamburger-bar-gap);
        }
    }

    /* .bg-head / .text-title / .p-t-title ย้ายไปอยู่ที่ assets/css/home.css
       แล้ว (ในชื่อ .hero-section / .hero-title / .hero-container) เพราะใช้
       เฉพาะหน้าแรกหน้าเดียว ไม่ใช่ค่ากลางของ layout — .t-m-center / .text-head
       เหลืออยู่แต่ไม่มีมาร์กอัปไหนเรียกใช้แล้ว (ของเดิมก็ไม่ได้ใช้เช่นกัน) */
    @media only screen and (max-width: 576px) {
        .t-m-center {
            text-align: center !important;
        }
    }

    @media only screen and (min-width: 576px) {
        .text-head {
            padding-top: 40px !important;
        }
    }

    .btn-primary {
        color: #f8f9fa;
        background-color: #017ACC;
        border-color: #017ACC;
    }

    .navbar-brand img {
        width: auto !important;
        height: 35px;
    }

    .main-menu>.nav-item>.nav-link {
        color: #000;
    }

    .menu .nav-link {
        color: #000;
    }

    .menu .nav-link:hover {
        color: #ff6701;
    }

    .main-menu>.nav-item>.nav-link:hover,
    .main-menu>.nav-item.dropdown .dropdown-toggle::after {
        vertical-align: top;
    }

    .main-menu .dropdown-menu {
        border: 1px solid rgba(0, 0, 0, .15);
    }

    .dropdown-menu:after {
        border-bottom: 12px solid rgba(0, 0, 0, .15);
    }

    .py-menu {
        padding-top: .75rem !important;
        padding-bottom: .75rem !important;
    }

    .nav-busandvan {
        height: 60px;
    }

    @media only screen and (min-width: 1000px) {
        .nav-busandvan {
            height: 60px;
        }
    }

    @media only screen and (max-width: 1000px) {
        .nav-busandvan {
            height: 80px;
        }
    }

    @media only screen and (max-width: 767px) {
        .nav-busandvan {
            height: 60px;
        }
    }

    .btn-account {
        background-color: #fff;
        color: #ff6500;
        border: 1px solid #ff6500;
        font-weight: 400;
        font-size: 14px;
        padding: 5px 15px;
        border-radius: 5px;
    }

    .btn-account:hover {
        background-color: #ff6500;
        color: #fff;
        border: 1px solid #ff6500;
    }

    .btn-account-mobile {
        background-color: #fff;
        color: #ff6500;
        border: 1px solid #ff6500;
        font-weight: 400;
        font-size: 14px;
        padding: 5px 15px;
        border-radius: 5px;
        display: block;
        text-align: center;

        &:hover {
            background-color: #ff6500;
            color: #fff;
            border: 1px solid #ff6500;
        }
    }

    .dropdown-account {

        a {
            text-decoration: none;
            padding: 8px 5px 5px 5px;
            display: flex;

            &:hover {
                color: #ff6500;

                strong {
                    color: #ff6500;
                }
            }

            img {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                margin-right: 10px;
                margin-top: -6px;
            }

            strong {
                color: #333;
                font-weight: 400;
                font-size: 14px;
            }
        }

        .dropdown-menu {
            padding: 10px 5px;
            margin-top: 6px;

            .dropdown-item {
                &:active {
                    background-color: unset;
                }

                &:hover {
                    background-color: unset;
                    color: #ff6500;
                }
            }
        }
    }

    .wrap-account-mobile {
        padding: 10px 15px;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: stretch;

        .card-account {
            display: flex;
            align-items: center;

            .image {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                overflow: hidden;
                margin-right: 10px;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .information {
                display: flex;
                flex-direction: column;

                strong {
                    color: #333;
                    font-weight: 400;
                    font-size: 14px;
                }

                span {
                    color: #666;
                    font-size: 12px;
                }
            }
        }

    }

/* ===== Footer ===== */

footer {
    background-color: #333;
    padding: 40px 0 20px 0;
    font-size: 14px;
    color: #fff;
}

footer .content-menu .tel-link {
    display: flex;
    align-items: center;
}

footer .content-menu .tel-link span {
    font-size: 16px;
    font-weight: bold;
    margin-right: 10px;
}

footer .content-menu .tel-link a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}

footer .content-menu .tel-link a:hover {
    color: #ff6700;
}

footer .content-menu .list-social-media {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

footer .content-menu .list-social-media li a {
    color: #fff;
}

footer .content-menu .list-social-media li a img {
    width: 30px;
    height: auto;
    transition: transform 0.3s;
}

footer .content-menu .list-social-media li a img:hover {
    transform: scale(1.1);
}

footer .content-menu .menu-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

footer .content-menu .menu-links h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #fff;
}

footer .content-menu .menu-links .menu-section h5 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #fff;
}

footer .content-menu .menu-links .menu-section .list-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

footer .content-menu .menu-links .menu-section .list-menu li {
    margin-bottom: 10px;
}

footer .content-menu .menu-links .menu-section .list-menu li a {
    color: #fff;
    transition: color 0.3s;
    font-size: 12px;
}

footer .content-menu .menu-links .menu-section .list-menu li a:hover {
    color: #ff6700;
}

@media (max-width: 500px) {
    footer .content-menu .menu-links {
        grid-template-columns: repeat(2, 1fr);
    }
}

footer .content-menu .list-payment h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #fff;
}

footer .content-menu .list-payment .list-payment-methods {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

footer .content-menu .list-payment .list-payment-methods li {
    margin-right: 8px;
}

footer .content-menu .list-payment .list-payment-methods li img {
    width: 40px;
    height: auto;
    border-radius: 5px;
    transition: transform 0.3s;
}

footer .content-menu .list-payment .list-payment-methods li img:hover {
    transform: scale(1.1);
}

@media (max-width: 992px) {
    footer .content-menu .row {
        gap: 20px;
    }
}

footer .content-copyright {
    border-top: 1px solid #9b9b9b;
    padding-top: 20px;
    margin-top: 20px;
}

footer .content-copyright .row-copyright {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

footer .content-copyright .row-copyright .copyright-text {
    margin-bottom: 10px;
}

footer .content-copyright .row-copyright .copyright-text a {
    color: #fff;
    transition: color 0.3s;
}

footer .content-copyright .row-copyright .copyright-text a:hover {
    color: #e65c00;
}

footer .content-copyright .row-copyright .language-switcher .row-language {
    display: flex;
    gap: 15px;
}

footer .content-copyright .row-copyright .language-switcher .row-language .col-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

footer .content-copyright .row-copyright .language-switcher .row-language .col-item a {
    color: #fff;
    transition: color 0.3s;
}

footer .content-copyright .row-copyright .language-switcher .row-language .col-item a img {
    width: 20px;
    height: auto;
    transition: transform 0.3s;
}

footer .content-copyright .row-copyright .language-switcher .row-language .col-item a img:hover {
    transform: scale(1.1);
}

footer .content-copyright .row-copyright .language-switcher .row-language .col-item a span {
    font-size: 14px;
}

footer .content-copyright .row-copyright .language-switcher .row-language .col-item a:hover {
    color: #ff6700;
}

@media (max-width: 576px) {
    footer .content-copyright .row-copyright {
        flex-direction: column;
        justify-content: center;
    }
}

/* ===== ค่าที่เดิมเขียน inline อยู่ใน header.inc.php — ย้ายมารวมไว้ที่นี่ ===== */
.nav-busandvan {
    background-color: #fff;
    border-color: #e6e6e6;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.12);
}

.navbar-header {
    font-weight: 600;
    color: #ff6701;
}

#top_menu {
    font-size: 14px;
}

.main-menu .nav-link a,
.main-menu .nav-link a span {
    color: #000;
}

.main-menu .nav-link a:hover span {
    color: #ff6701;
}

/* เมนูบทความของหน้าอังกฤษ — เว็บเดิมใส่ style="color:#333" ต่างจากเมนูอื่น */
.main-menu .nav-link a span.menu-muted {
    color: #333;
}

.main-menu > .nav-item.dropdown > .nav-link {
    padding-top: 12px;
}

.drawer-nav {
    text-align: left;
}

/* ===== เว้นที่ให้แถบเมนูแบบ fixed — เดิมเขียน inline อยู่ในทุกหน้า ===== */
#content_wrapper {
    padding-top: 50px;
}

/* กล่องเนื้อหากว้าง 1240px — เว็บเดิมเขียน .container + style="max-width:1240px" ซ้ำหลายหน้า
   (contact, blog, blog-travel ฯลฯ) ยกมาไว้ที่เดียว ยังต้องใช้คู่กับ .container เพราะ
   max-width ของ .container เปลี่ยนตาม breakpoint (540/720/960/1140/1320) ตัดทิ้งไม่ได้ */
.container-wide {
    max-width: 1240px;
}

/* ── แบนเนอร์หัวเรื่องกลาง (.bg-head / .text-title / .p-t-title) ─────────────
   เว็บเดิมประกาศไว้ใน header.inc.php ที่ include ทุกหน้า หน้าไหนมีแบนเนอร์ก็ได้ค่านี้ไปด้วย
   หน้าแรกของโปรเจกต์นี้ยุบไปใช้ชื่อคลาสของตัวเองแล้ว (.hero-* ใน home.css)
   แต่หน้าอื่นที่ยังใช้คลาสเดิม (route-info ฯลฯ) ยังต้องพึ่งค่าชุดนี้อยู่
   .bg-head: header.inc.php ประกาศซ้ำทั้งจอเล็ก/จอใหญ่ค่าเดียวกัน จึงรวมเป็นกฎเดียว
   (ไม่ใส่รูปพื้นหลัง — หน้าที่ใช้คลาสนี้กำหนดรูปของตัวเองทุกหน้า) */
.bg-head {
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

@media only screen and (max-width: 576px) {
    .text-title {
        font-size: 24px;
        padding-bottom: 15px;
        color: #fff;
    }

    .p-t-title {
        padding-top: 50px;
    }
}

@media only screen and (min-width: 576px) {
    .text-head {
        padding-top: 40px !important;
    }

    .text-title {
        font-size: 28px;
        padding-bottom: 5px;
        color: #fff;
    }

    .p-t-title {
        padding-top: 100px;
        padding-bottom: 30px;
    }
}

/* หน้าอังกฤษ — en/header.inc.php ของเว็บเดิมตั้ง padding-bottom ของ .text-title สลับกับฝั่งไทย
   (มือถือ 5px · จอใหญ่ 15px) หน้าที่ใช้คลาสนี้ในภาษาอังกฤษจึงต้องได้ค่าชุดนี้
   ห่อ html[lang] ด้วย :where() ให้น้ำหนักเท่า .text-title เปล่า — CSS ของหน้าที่เจาะจงกว่ายังชนะได้เหมือนเว็บเดิม */
@media only screen and (max-width: 576px) {
    :where(html[lang="en"]) .text-title {
        padding-bottom: 5px;
    }
}

@media only screen and (min-width: 576px) {
    :where(html[lang="en"]) .text-title {
        padding-bottom: 15px;
    }
}

/* ── ฟอร์มค้นหาเที่ยวรถของ busx (มาร์กอัปมาจาก JS ของ busx ทุกหน้าที่มีฟอร์ม) ──
   ไอคอนสลับต้นทาง-ปลายทาง และไอคอนค้นหา/ปิดของกล่องเลือกสถานี เป็น <img> ตัวเดียวในบรรทัด
   หน้าที่เว็บเดิมยังใช้ doctype XHTML (almost standards) กล่องจึงสูงเท่ารูปพอดี
   ของใหม่ใช้ <!DOCTYPE html> ทุกหน้าเลยนับ strut เพิ่ม 1px ไอคอนลอยขึ้นครึ่ง px
   (กับดักข้อ 13 ใน WORKLOG) — บังคับเป็น block เฉพาะหน้าที่ production ยังเป็น XHTML
   หน้าแรกไทย · city · Landing Page บริษัท · ตารางเวลาแบบ custom เป็น <!DOCTYPE html> แล้ว ห้ามใส่ */
.page-station,
.page-route,
.page-route-info,
.page-blog,
.carrier-page:not(.carrier-page-custom),
html[lang="en"] .page-home {
    #busx-search-form {
        .switch-position img,
        .icon-search img,
        .icon-x img {
            display: block;
        }
    }
}

/* ── การ์ดบทความท่องเที่ยว (/blog-travel · หมวด · จังหวัด ทั้ง 2 ภาษา — production ยังเป็น XHTML) ──
   บรรทัด "สร้างโดย … | ยอดวิว" ตัวอักษร 10px ใน line-height 21px: doctype ใหม่วางบรรทัดต่ำกว่าเดิม 1px
   การ์ดทุกใบสูงเกิน 1px สะสมจนท้ายหน้ามือถือเลื่อน 6px (กับดักข้อ 13)
   vertical-align: top ให้ผลเท่ากันทั้ง 2 doctype — วัดจากเบราว์เซอร์แล้ว 135.8px / กล่อง 174.8px ตรง production */
.blogs-page {
    .wrap-blog .box-text .meta {
        vertical-align: top;
    }
}