@font-face {
    font-family: "Khmer-OS-Battambang-Regular";
    src: url("../vendor/fonts/khmer/Khmer-OS-Battambang-Regular.ttf");
    font-weight: normal;
    font-style: normal;
    unicode-range: U+00-FFFF;
}

body {
    font-family: Khmer-OS-Battambang-Regular;
}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
.title-kh {
    font-size: 14px;
    font-family: Moulpali-Regular;
}
.title-en {
    font-size: 10px;
    text-align: center;
    font-family: NotoSansKhmer-Regular;
}
.img-logo {
    width: 50px;
    height: 50px;
    margin-top: 5px;
}

.leading-6 {
    line-height: 1.2rem;
}

.sub_en ~ .text-danger-600.font-medium {
    display: none;
}
@media screen and (max-width: 635px) {
    .title-kh {
        font-size: 13px;
    }
    .title-en {
        font-size: 10px;
    }
    .img-logo {
        width: 45px;
        height: 45px;
    }
}
@media screen and (max-width: 499px) {
    .title-kh {
        font-size: 11px;
    }
    .title-en {
        font-size: 9px;
    }
}

@media screen and (max-width: 459px) {
    .title-kh {
        font-size: 9px;
    }
    .title-en {
        font-size: 7px;
    }
}
h1.text-capitalize,
span.text-capitalize {
    font-size: 1.5rem;
    font-weight: bold;
}

.fi-wi-chart > section {
    height: 100% !important; /* Force full height */
}

.sub_en {
    font-size: 12px;
}
.fi-ta-content {
    max-height: 300px; /* Limit table height */
    overflow-y: auto; /* Enable vertical scrolling */
}

table {
    border-spacing: 0;
}

thead {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

tbody {
    font-size: 14px;
}

th,
td {
    padding: 18px 24px;
    white-space: nowrap;
    border-bottom: 1px solid var(--borderColor);
}

tr:last-child td {
    border-bottom: none;
}

/*
  STICKY ROW
  Normal css box-shadow works for the header as it is a single html element
  */

tr.sticky {
    position: sticky;
    top: 0;
    z-index: 1;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}

/*
  STICKY COLUMN
  Avoid undesirable overlapping shadows by creating a faux shadow on the ::after psudo-element instead of using the css box-shadow property.
  */

th.sticky,
td.sticky {
    position: sticky;
    left: 0;
    background: rgb(255 255 255 / var(--tw-bg-opacity));
}
.dark td.sticky {
    background: rgba(var(--gray-900), var(--tw-bg-opacity));
}
.dark th.sticky {
    background: #2F2F32;
}
th.sticky::after,
td.sticky::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 0;
    bottom: -1px;
    width: 5px;
    border-left: 1px solid var(--borderColor);
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.08) 0%,
        rgba(0, 0, 0, 0) 100%
    );
}

th.sticky::before,
td.sticky::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 0;
    bottom: -1px;
    width: 5px;
    border-right: 1px solid var(--borderColor);
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.08) 100%
    );
}