@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@100;200;300;400;500;600;700;800&display=swap');

body {
    font-family: "Sarabun", sans-serif;
}

h1,h2,h3,h4,h5,h6,
p,span,div,
a,button,
input,textarea,select,
table,td,th {
    font-family: "Sarabun", sans-serif;
}

:root {
    --cassiopeia-color-primary: #FF55FF; /* e.g., #5e2688 */
    --cassiopeia-color-hover: #FF00AF; 
}

.container-header {
    background-image: url("/kkpersonnel/images/banners/header.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: #000000;
}


.container-header .container-nav {
    background: linear-gradient(
        180deg,
        #000000 0%,
        #321832 50%,
        #000000 100%
    );
}

body {
 	background-image: url("/kkpersonnel/images/backgrounds/background.jpg");
  	background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.site-grid a,
.site-grid a:link,
.site-grid a:visited,
.site-grid a:hover,
.site-grid a:focus,
.site-grid a:active {
    color: #0047CF;
    text-decoration: none !important;
}

.site-grid a:hover,
.site-grid a:focus {
    color: #EF0AA7;
}

/* Card */
.card-header {
    background-color: rgba(255, 192, 203, 0.2);
    padding: 10px 15px;
    background-image: url('/kkpersonnel/images/cards/HRlogohalf.png');
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) bottom;
    background-size: auto 60%;
}
.card-body {
    background-image: url("/kkpersonnel/images/cards/card.png");
    background-repeat: no-repeat;
    background-position: right 1px bottom 1px;
}

/* Page */
.com-content-article{
    word-wrap: break-word;
    background-clip: border-box;
    background-color: #fff;
    border: 1px solid #dfe3e7;
    border-radius: .25rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
}

.com-content-article .page-header{
    background-color: rgba(255, 192, 203, 0.2);
    border-bottom: 1px solid #dfe3e7;
    margin-bottom: 0;
    padding: .5rem 1rem;
    background-image: url('/kkpersonnel/images/cards/HRlogohalf.png');
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) bottom;
    background-size: auto 60%;
}

.com-content-article .com-content-article__body {
	padding: 1rem;
}

.com-content-category {
  	word-wrap: break-word;
    background-clip: border-box;
    background-color: #fff;
    border: 1px solid #dfe3e7;
    border-radius: .25rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
}

.com-content-category h1 {
  	background-color: rgba(255, 192, 203, 0.2);
    border-bottom: 1px solid #dfe3e7;
    margin-bottom: 0;
    padding: .5rem 1rem;
    background-image: url('/kkpersonnel/images/cards/HRlogohalf.png');
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) bottom;
    background-size: auto 60%;
}

.com-content-category__articles {
  	padding: 1rem;
}

.article-info {
  	padding: 1rem;
}

/* ปุ่ม */
.btn-primary {
    background-color: #FF00AA;
    border-color: #FF00AA;
}

.btn-primary:hover {
	background-color: #ED029F;
    border-color: #ED029F;
}

/* เมนูหลัก */
@media (min-width: 992px) {

.mod-menu_dropdown-metismenu{
    display:flex;
}

.mod-menu_dropdown-metismenu > li{
    position:relative;
}

.mod-menu_dropdown-metismenu > li > .mm-collapse{
    position:absolute;
    top:100%;
    left:0;
    min-width:260px;

    display:block !important;
    visibility:hidden;
    opacity:0;

    height:auto !important;
    overflow:visible !important;

    transform:translateY(10px);

    transition:.25s;

    background:#fff;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

    z-index:9999;
}

.mod-menu_dropdown-metismenu > li:hover > .mm-collapse{
  
    visibility:visible;
    opacity:1;

    transform:translateY(0);

}

.mod-menu_dropdown-metismenu .mm-collapse li > a {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
}
  
.mod-menu_dropdown-metismenu .mm-collapse a {
    transition: all .25s ease;
    border-radius: 4px;
    margin: 2px 8px;
}

.mod-menu_dropdown-metismenu .mm-collapse a:hover {
    text-decoration: none !important;
}
  
.mod-menu_dropdown-metismenu .mm-collapse li{
    background-color: #fff;
    list-style:none;
}

.mod-menu_dropdown-metismenu .mm-collapse li:hover {
    background-color: #EF0AA7;
    color: #fff;
}

.mod-menu_dropdown-metismenu .mm-collapse li.active,
.mod-menu_dropdown-metismenu .mm-collapse li.current {
    background-color: #EF0AA7;
    color: #fff;
}

.metismenu.mod-menu .metismenu-item.active>a {
    text-decoration: none !important;
}

}

.metismenu.mod-menu .mm-collapse {
    background-color: #fff;
}
.metismenu.mod-menu .mm-collapse li:hover {
    background-color: #EF0AA7;
    color: #fff;
}