@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Athiti&family=Chakra+Petch&family=Charm&family=Charmonman&family=Chonburi&family=Fahkwang&family=Itim&family=K2D&family=Kanit&family=KoHo&family=Kodchasan&family=Mali&family=Mitr&family=Niramit&family=Pridi&family=Sarabun&family=Sriracha&family=Srisakdi&family=Taviraj&family=Thasadith&family=Trirong&display=swap');

/* ==============================================================
   1. โครงสร้างหลัก (Navbar Layout)
   ============================================================== */
.nav-position {
    position: relative;
    width: 100%;
    top: 0px;
    left: 15%;
    padding-left: 200px;
    margin: 0px;
}

.navbar {
    overflow: hidden;
    background-color: transparent;
}

/* ลิงก์เมนูหลัก */
.navbar a {
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif !important;  
    float: left;
    clear: both;
    font-size: 14px !important;  
    color: #000;
    font-style: normal !important;  
    font-weight: 400 !important;  
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* เอฟเฟกต์ชี้เมาส์เมนูหลัก */
.navbar a:hover, 
.dropdown:hover .dropbtn {
    color: #ffa326;
}

/* ==============================================================
   2. โครงสร้างปุ่มไอคอนเมนูหลัก (Main Icon Blocks)
   ============================================================== */
.icon-menu-block {
    text-align: center !important;
    float: left;
    display: block;
    width: 147px !important;
    height: auto !important;
}

/* การจัดวางและขนาดไอคอนเมนูหลัก */
.icon-menu-block .main-icon,
.icon-menu-block svg.main-icon {
    font-size: 30px !important; 
    width: 30px !important;     
    height: 30px !important;    
    display: block !important;
    margin: 0 auto 12px auto !important; /* จัดกึ่งกลางและเว้นล่าง */
    transition: transform 0.3s ease !important;
}

/* เอฟเฟกต์ไอคอนเด้งเมื่อเอาเมาส์ชี้ */
.navbar a:hover svg.main-icon, 
.dropdown:hover svg.main-icon {
    transform: scale(1.15) !important;
}

/* --- สีของไอคอนเมนูหลักแต่ละตัว --- */
.icon-menu-block svg.icon-home { color: #FF7F50 !important; }      /* หน้าหลัก: สีส้ม */
.icon-menu-block svg.icon-info { color: #4169E1 !important; }      /* ข้อมูลพื้นฐาน: สีฟ้า */
.icon-menu-block svg.icon-strategy { color: #FFB300 !important; }  /* ยุทธศาสตร์: สีเหลืองทอง */
.icon-menu-block svg.icon-service { color: #00B16A !important; }   /* บริการประชาชน: สีเขียว */


/* ==============================================================
   3. ระบบ Dropdown (Mega Menu Container)
   ============================================================== */
.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 14px !important;  
    border: none;
    outline: none;
    color: #000;
    padding: 14px 16px;
    background-color: inherit;
    font: inherit;
    margin: 0;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #FFF;
    width: 100%;
    left: 0;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 999;
}

/* แสดง Dropdown เมื่อเอาเมาส์ชี้ */
.dropdown:hover .dropdown-content {
    display: block;
    width: 800px;
    border-radius: 10px;
    background-color: #FFF;
    padding: 5px;
}

/* ==============================================================
   4. เนื้อหาภายใน Mega Menu (คอลัมน์, หัวข้อ, ลิงก์ย่อย)
   ============================================================== */
.dropdown-content div.row {
    margin-left: 0px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.column {
    float: left;
    width: 260px;
    padding: 10px;
    margin-left: 0px;
    background-color: #FFF;
    height: auto;
}

/* --- หัวข้อ h3 (ที่มีแฟ้มข้อมูล) --- */
.dropdown-content h3 {
    font-family: 'Kanit', Arial, Helvetica, Sans-Serif !important;
    font-size: 18px !important;
    color: #000 !important;
    font-style: normal !important;  
    font-weight: 400 !important;  
    display: flex !important;
    align-items: center !important; 
    justify-content: flex-start !important; 
    text-align: left !important; 
    width: 100% !important;
    margin-bottom: 5px !important;
    padding: 0px 0px 5px 0px !important;
    border-bottom: 0.5px solid #ddd !important;
    background: transparent !important;
}

/* --- ไอคอนแฟ้มข้อมูล (ปรับเป็นสีเหลืองโฟลเดอร์) --- */
.folder-icon, 
svg.folder-icon {
    color: #FFC107 !important; /* สีเหลืองโฟลเดอร์มาตรฐาน */
    margin-right: 10px !important; 
    font-size: 18px !important;
}

/* --- ลิงก์ย่อยภายในคอลัมน์ --- */
.navbar div.column a, 
.navbar div.column a:link, 
.navbar div.column a:visited, 
.navbar div.column a:focus {
    font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif !important;  
    font-size: 14px !important;  
    color: #000;
    font-style: normal !important;  
    font-weight: 400 !important;  
    text-decoration: none;
    float: none;
    text-align: left;
    padding: 5px;
    display: block;
    clear: both;
}

.navbar div.column a:hover {
    color: #ffa326;
}


/* ==============================================================
   5. การปรับขนาดตามหน้าจอ (Responsive Media Queries)
   ============================================================== */
@media screen and (max-width: 1148px) { 
    .navbar a { padding: 14px 12px; }
    .icon-menu-block { width: 120px !important; }
}

@media screen and (max-width: 1052px) { 
    .navbar a { padding: 14px 10px; }
    .icon-menu-block { width: 100px !important; }
}

@media screen and (max-width: 992px) { 
    .navbar a { padding: 14px 8px; }
    .icon-menu-block { width: 80px !important; }
}

@media screen and (max-width: 800px) { 
    .nav-position {
        visibility: hidden;
        clear: both;
        display: none;
    }
}

@media screen and (max-width: 600px) {
    .column {
        width: 100%;
        height: auto;
    }
}