@import url('https://fonts.googleapis.com/css2?family=Bayon&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

html,
body,
body * {
    cursor: url('../img/cursor.png') 1 1, auto !important;
}

html,
body {
    background: #f5f6f8;
    font-family: var(--site-font-latin, 'Roboto Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

html {
    scroll-behavior: smooth;
}

/* Anchored sections should not land under the fixed header. */
:target {
    scroll-margin-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body.auth-page {
    opacity: 0;
    transform: translateY(6px);
    animation: authPageEnter 160ms ease-out forwards;
}

body.auth-page.auth-page-leaving {
    animation: authPageLeave 95ms ease-in forwards;
}

@keyframes authPageEnter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes authPageLeave {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-3px);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.auth-page,
    body.auth-page.auth-page-leaving {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

body.auth-has-background {
    background: #111;
    min-height: 100vh;
    position: relative;
}

body.auth-has-background::before,
.auth-bg-video {
    height: 100vh;
    left: 0;
    object-fit: cover;
    position: fixed;
    top: 0;
    width: 100vw;
}

body.auth-has-background::before {
    background: var(--auth-bg-image, none) center / cover no-repeat;
    content: "";
    z-index: 0;
}

.auth-bg-video {
    z-index: 0;
}

body.auth-has-background::after {
    background: linear-gradient(180deg, rgba(7, 10, 16, 0.3), rgba(7, 10, 16, 0.46));
    content: "";
    inset: 0;
    pointer-events: none;
    position: fixed;
    z-index: 1;
}

html[lang="km"] body {
    font-family: var(--site-font-khmer, 'Bayon', 'Noto Sans Khmer', sans-serif);
}

::selection {

    color: #fff;
    background: #910000;
}

.auth-container {
    background: #f5f6f8;
    padding: 24px 15px;
}

body.auth-has-background .auth-container {
    background: transparent;
    position: relative;
    z-index: 2;
}

.form {
    background: #fff;
    border: 1px solid #e3e6eb;
    border-radius: 8px;
    box-shadow: 0 14px 36px rgba(20, 26, 38, 0.08);
    padding: 34px 30px 30px;
}

body.auth-has-background .form {
    border-color: rgba(255, 255, 255, 0.72);
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.34);
}

.login-form,
.auth-form {
    max-width: 430px;
}

.auth-logo {
    display: block;
    margin: 0 auto 22px;
    max-width: 118px;
    width: 100%;
}

.login-form h2,
.auth-form h2 {
    color: #171d2b;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 24px;
}

.auth-note {
    color: #697386;
    font-size: 13px;
    line-height: 1.6;
    margin: -8px 0 18px;
}

.form form .form-control {
    border-color: #d9dee7;
    border-radius: 6px;
    color: #171d2b;
    height: 42px;
    font-size: 14px;
    padding: 9px 12px;
}

.form form .form-control:focus {
    border-color: #d9dee7;
    box-shadow: 0 0 0 3px rgba(23, 29, 43, 0.08);
}

.form form .form-control:invalid {
    border-color: #d9dee7;
    box-shadow: none;
}

.form form .forget-pass {
    margin: -4px 0 18px;
}

.form form .forget-pass a {
    font-size: 14px;
}

.form .button {
    background: #910000;
    border-color: #910000;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.form .button:hover,
.form .button:focus,
.form .button:active {
    background: #730000;
    border-color: #730000;
    color: #fff !important;
}

.form .button:disabled {
    color: #fff !important;
    cursor: wait;
    opacity: 0.72;
}

.form form .link {
    color: #333b4c;
    font-size: 14px;
    padding: 4px 0;
}

.form form .link a {
    color: #910000;
}

.login-form form p {
    font-size: 14px;
}

.row .alert {
    font-size: 14px;
}

.login-link {
    margin-top: 14px;
}

.captcha-row {
    align-items: center;
    display: flex;
    gap: 10px;
}

.captcha-row img {
    border: 1px solid #d9dee7;
    border-radius: 6px;
    cursor: pointer;
    flex: 0 0 120px;
    height: 42px;
    object-fit: cover;
}

.reset-link {
    margin-top: 8px;
    word-break: break-all;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 2.0rem;
    font-weight: 500;
    line-height: 1.2;
}

html[lang="km"] .login-form,
html[lang="km"] .auth-form,
html[lang="km"] .login-form input,
html[lang="km"] .auth-form input,
html[lang="km"] .login-form button,
html[lang="km"] .auth-form button {
    font-family: var(--site-font-khmer, 'Bayon', 'Noto Sans Khmer', sans-serif);
}

html[lang="km"] .login-form h2,
html[lang="km"] .auth-form h2 {
    font-size: 22px;
    line-height: 1.6;
}

@media (max-width: 575.98px) {
    .form {
        padding: 28px 20px 24px;
    }

    .login-form h2,
    .auth-form h2 {
        font-size: 21px;
    }

    .captcha-row {
        align-items: stretch;
        flex-direction: column;
    }

    .captcha-row img {
        width: 120px;
    }
}

footer {
    background-color: #222;
    color: #fff;
    font-size: 15px;
    position: relative;
    text-align: center;
    z-index: 999;
}

footer p {
    margin: 10px 0;
}

footer i {
    color: red;
}

footer a {
    color: #3c97bf;
    text-decoration: none;
}

.news-page {
    padding: 32px 0 56px;
}

.news-sidebar {
    background: transparent;
}

.news-sidebar-link {
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    font-size: 13px;
    line-height: 1.5;
    padding: 9px 0;
}

.news-sidebar-link a {
    color: #5d3d27;
    display: block;
    text-decoration: none;
}

.news-sidebar-link a:hover {
    color: #a66b2f;
}

.news-article {
    background: #fff;
    color: #4b260e;
    margin-bottom: 40px;
    min-height: 720px;
}

.news-article--empty {
    align-items: center;
    display: flex;
    justify-content: center;
}

.news-empty-state {
    max-width: 560px;
    padding: 48px 24px;
    text-align: center;
}

.news-empty-state h1 {
    color: #4b260e;
    font-size: 32px;
    line-height: 1.3;
    margin: 0 0 12px;
}

.news-empty-state p {
    color: #76543b;
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}

.news-article__header {
    border-bottom: 1px solid #d7d2ca;
    min-height: 72px;
    padding: 18px 28px;
    position: relative;
}

.news-section-title {
    align-items: center;
    color: #111;
    display: flex;
    font-size: 24px;
    font-weight: 700;
    gap: 8px;
}

.news-section-title span {
    background: #111;
    display: inline-block;
    height: 28px;
    width: 4px;
}

.news-crumb {
    color: #5b3a20;
    font-size: 12px;
    position: absolute;
    right: 28px;
    top: 26px;
}

.news-crumb a {
    color: inherit;
    text-decoration: none;
}

.news-article__body {
    padding: 48px 34px 70px;
}

.km-text,
.news-article__body.is-khmer,
.news-article__body.is-khmer h1,
.news-article__body.is-khmer .news-rich-content,
.news-article__body.is-khmer .news-rich-content * {
    font-family: var(--site-font-khmer, 'Bayon', 'Noto Sans Khmer', sans-serif);
    letter-spacing: 0;
}

.news-article__body.is-khmer .news-rich-content {
    font-size: 15px;
    line-height: 1.8;
}

.news-article__body h1 {
    color: #8a4f1f;
    font-size: 24px;
    line-height: 1.35;
    margin: 0 auto 8px;
    max-width: 760px;
    text-align: center;
}

.news-article__body time {
    color: #2f190b;
    display: block;
    font-size: 14px;
    margin-bottom: 48px;
    text-align: center;
}

.news-rich-content {
    color: #4a260f;
    font-size: 14px;
    line-height: 1.6;
}

.news-rich-content h2,
.news-rich-content h3,
.news-rich-content h4 {
    color: #064ee4;
    font-size: 15px;
    font-weight: 700;
    margin: 28px 0 12px;
}

.news-rich-content p {
    margin: 0 0 12px;
}

.news-rich-content a {
    color: #004cff;
    text-decoration: underline;
}

.news-rich-content img {
    display: inline-block;
    height: auto;
    margin: 24px 0;
    max-width: 100%;
    vertical-align: middle;
}

.news-rich-content::after,
.download-rich-content::after {
    clear: both;
    content: "";
    display: block;
}

img.noto-animated-emoji,
.news-rich-content img.noto-animated-emoji,
.download-rich-content img.noto-animated-emoji {
    display: inline-block;
    height: 1.45em;
    line-height: 0;
    margin: 0 .08em;
    max-width: none;
    vertical-align: -.3em;
    width: 1.45em;
}

.news-rich-content td img.noto-animated-emoji,
.news-rich-content th img.noto-animated-emoji,
.download-rich-content td img.noto-animated-emoji,
.download-rich-content th img.noto-animated-emoji {
    height: 1.3em;
    margin: 0 .06em;
    vertical-align: -.24em;
    width: 1.3em;
}

/* Editor-authored tables sit in a scroll container that the formatter adds
   (NewsContentFormatter::wrapTables). A table needs whatever width its columns
   demand, and pasted tables often demand more than the article column has, so
   the overflow becomes a scrollbar here rather than a table lying across the
   page background. */
.rich-table {
    max-width: 100%;
    margin: 18px 0 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.rich-table > table {
    margin: 0;
}

/* A link that contains only an image is a button. The formatter tags these
   with .rich-image-link so they get button affordances: no underline, and a
   hover response so they read as clickable. */
.rich-image-link {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
    border: 0;
    margin: 16px 0;
    vertical-align: middle;
    transition: filter .15s ease, transform .15s ease;
}

/* The spacing moves to the link, so the clickable box hugs the artwork
   instead of extending into the image's own margin. Qualified with the
   content class because the generic image rule further down this file has
   the same specificity and would otherwise win on source order. */
.news-rich-content a.rich-image-link > img,
.download-rich-content a.rich-image-link > img {
    margin: 0;
}

.rich-image-link:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
}

.news-rich-content table {
    border-collapse: collapse;
    font-size: 13px;
    margin: 18px 0 24px;
    max-width: 100%;
    width: 100%;
}

.news-rich-content th,
.news-rich-content td {
    border: 1px solid #878787;
    padding: 8px 10px;
    text-align: center;
}

.news-rich-content th {
    background: #f7f2eb;
    color: #5a3217;
    font-weight: 700;
}

.news-list-body {
    padding: 26px 32px 42px;
}

.news-list-body.is-khmer,
.news-list-body.is-khmer * {
    font-family: var(--site-font-khmer, 'Bayon', 'Noto Sans Khmer', sans-serif);
    letter-spacing: 0;
}

.news-list-item {
    align-items: start;
    border-bottom: 1px solid #e2ddd6;
    display: grid;
    gap: 22px;
    grid-template-columns: 210px minmax(0, 1fr);
    padding: 24px 0;
}

.news-list-item:first-child {
    padding-top: 0;
}

.news-list-item:last-child {
    border-bottom: 0;
}

.news-list-item__media {
    aspect-ratio: 16 / 10;
    background: #eee8df;
    border-radius: 4px;
    display: block;
    overflow: hidden;
}

.news-list-item__media img {
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
    width: 100%;
}

.news-list-item__media:hover img {
    transform: scale(1.025);
}

.news-list-item__media--empty {
    align-items: center;
    color: #b68243;
    display: flex;
    font-size: 38px;
    justify-content: center;
}

.news-list-item__meta {
    align-items: center;
    color: #7b6a5e;
    display: flex;
    font-size: 12px;
    gap: 12px;
    position: absolute;
    right: 0;
    top: 2px;
}

.news-list-item__meta time {
    margin-left: auto;
}

.news-list-item__content {
    min-width: 0;
    position: relative;
}

.news-list-item h2 {
    font-size: 20px;
    line-height: 1.4;
    margin: 0 0 9px;
    padding-right: 100px;
}

.news-list-item h2 a {
    color: #1c1713;
    text-decoration: none;
}

.news-list-item h2 a:hover {
    color: #9a6229;
}

.news-list-item p {
    color: #5f554d;
    font-size: 13px;
    line-height: 1.75;
    margin: 0 0 12px;
}

.news-list-item__more {
    align-items: center;
    color: #004881;
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: color .18s ease;
}

.news-list-item__more:hover {
    color: #b5341e;
    text-decoration: none;
}

.news-list-item__more::after {
    content: "\203A";
    font-family: Arial, sans-serif;
    font-size: 19px;
    line-height: 1;
    margin-left: 8px;
    margin-top: -1px;
}

.news-pagination {
    align-items: center;
    display: flex;
    gap: 7px;
    justify-content: center;
    padding-top: 30px;
}

.news-pagination a {
    align-items: center;
    border: 1px solid #d7c7b6;
    color: #68401b;
    display: inline-flex;
    font-size: 13px;
    height: 34px;
    justify-content: center;
    min-width: 34px;
    padding: 0 8px;
    text-decoration: none;
}

.news-pagination a:hover,
.news-pagination a.is-active {
    background: #9a6229;
    border-color: #9a6229;
    color: #fff;
}

@media (max-width: 767.98px) {
    .news-article--empty {
        min-height: 480px;
    }

    .news-empty-state h1 {
        font-size: 26px;
    }

    .news-article__header {
        padding: 16px 18px;
    }

    .news-crumb {
        margin-top: 8px;
        position: static;
        text-align: left;
    }

    .news-article__body {
        padding: 30px 18px 46px;
    }

    .news-article__body h1 {
        font-size: 20px;
    }

    /* The .rich-table wrapper already handles overflow at every width, so the
       table keeps its table layout here instead of becoming a block. */
    .news-rich-content table {
        font-size: 12px;
    }

    .news-list-body {
        padding: 22px 18px 36px;
    }

    .news-list-item {
        gap: 14px;
        grid-template-columns: 1fr;
        padding: 22px 0;
    }

    .news-list-item h2 {
        font-size: 18px;
        padding-right: 92px;
    }
}

/* Backend-authored content is black unless the editor supplies a color. */
.news-article__body > h1,
.news-article__body > time,
.news-rich-content,
.download-rich-content {
    color: #111;
}

.news-rich-content h1,
.news-rich-content h2,
.news-rich-content h3,
.news-rich-content h4,
.news-rich-content h5,
.news-rich-content h6,
.news-rich-content a,
.news-rich-content th,
.news-rich-content td,
.download-rich-content h1,
.download-rich-content h2,
.download-rich-content h3,
.download-rich-content h4,
.download-rich-content h5,
.download-rich-content h6,
.download-rich-content a,
.download-rich-content th,
.download-rich-content td {
    color: inherit;
}

.download-rich-content img {
    display: inline-block;
    height: auto;
    margin: 16px 0;
    max-width: 100%;
    vertical-align: middle;
}

.custom-page-body { padding: 34px 34px 70px; }
.custom-page-body.is-khmer,
.custom-page-body.is-khmer .news-rich-content,
.custom-page-body.is-khmer .news-rich-content * {
    font-family: var(--site-font-khmer, 'Bayon', 'Noto Sans Khmer', sans-serif);
    letter-spacing: 0;
}
.custom-page-body .news-rich-content {
    color: #111;
    min-height: 560px;
}
@media (max-width: 767.98px) {
    .custom-page-body { padding: 26px 20px 48px; }
    .custom-page-body .news-rich-content { min-height: 360px; }
}