/* =====================================================
   NS THAI — Shared Stylesheet
   Header / Navigation / Dropdown / Footer
   ใช้ร่วมกันทุกหน้า — Generated 2026-05-22
   ===================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { line-height: 1.6; color: #333; background-color: #f9f9f9; }

/* ===== Sticky Header ===== */
.header-sticky { position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.1); background-color: #fff; }

/* ===== Top Contact Bar ===== */
.top-contact-bar { background-color: #003366; color: white; padding: 8px 10px; text-align: center; font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.contact-title-group { display: inline-flex; align-items: center; gap: 8px; }
.logo-inline { height: 35px; width: auto; object-fit: contain; }
.contact-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 15px; }
.contact-group { display: inline-flex; align-items: center; gap: 5px; }
.contact-group img { width: 22px; height: 22px; border-radius: 4px; }
.top-contact-bar a { color: #ffcc00; text-decoration: none; font-weight: bold; }

/* ===== Main Navigation ===== */
.main-nav { background-color: #fff; padding: 15px 20px; text-align: center; border-bottom: 2px solid #ddd; display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; }
.main-nav a { text-decoration: none; color: #333; font-weight: bold; white-space: nowrap; cursor: pointer; }
.main-nav a:hover { color: #003366; }

/* ===== Dropdown Menu ===== */
.dropdown { position: relative; display: inline-block; }
.dropdown-content { display: none; position: absolute; background-color: #fff; min-width: 280px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1); z-index: 1001; text-align: left; border-radius: 4px; top: 100%; left: 50%; transform: translateX(-50%); border: 1px solid #eee; }
.dropdown-content a { color: #333; padding: 12px 16px; text-decoration: none; display: block; border-bottom: 1px solid #f0f0f0; font-weight: normal; font-size: 15px; }
.dropdown-content a:last-child { border-bottom: none; }
.dropdown-content a:hover { background-color: #f9f9f9; color: #d9534f; }
@media (min-width: 769px) { .dropdown:hover .dropdown-content { display: block; } }

/* ===== Breadcrumb ===== */
.breadcrumbs { font-size: 14px; color: #777; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
.breadcrumbs a { color: #003366; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* ===== Footer ===== */
.footer { background-color: #222; color: #ccc; text-align: center; padding: 20px; margin-top: 40px; font-size: 13px; }
.footer p { text-align: center; margin-bottom: 5px; }
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* ===== Mobile Responsive ===== */
@media (max-width: 768px) {
    .top-contact-bar { font-size: 13px; }
    .logo-inline { height: 26px; }
    .contact-row { gap: 10px; }
    .main-nav { padding: 10px; gap: 10px 15px; }
    .dropdown-content { position: static; display: none; width: 100%; box-shadow: none; transform: none; border: 1px solid #ddd; margin-top: 10px; }
    .dropdown-content.show { display: block; }
    .dropdown-content a { text-align: center; white-space: normal; }
    .breadcrumbs { font-size: 13px; margin-bottom: 18px; padding-bottom: 12px; }
    .footer { font-size: 12px; padding: 15px 10px; }
}