/* สไตล์ของแถบเมนู */ .nav-tabs { display: flex; border-bottom: 2px solid #ccc; /* เส้นใต้ */ width: 100%; cursor: pointer; } .nav-item { list-style: none; margin-right: 10px; /* ช่องว่างระหว่างเมนู */ } .nav-link { text-decoration: none; padding: 10px 20px; display: inline-block; font-size: large; border-width: 2px 2px 0px 2px; border-style: solid; border-color: #ccc; border-radius: 5px 5px 0px 0px; } .nav-link:hover { background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */ } .nav-link.active { color: #ffffff; /* สีตัวอักษรในสถานะ active */ font-size: large; border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */ background-color: rgb(var(--color-primary)); border-width: 2px 2px 0px 2px; border-style: solid; border-color: rgb(var(--color-primary)); border-radius: 5px 5px 0px 0px; } .tab-content { margin-top: 20px; } .tab-pane.active { display: block; } .nav-item-text { list-style: none; margin-right: 10px; /* ช่องว่างระหว่างเมนู */ } .nav-link-text { text-decoration: none; display: inline-block; font-size: large; color: #569bf5; border-bottom: 3.5px solid #569bf5; }