@charset "utf-8";
@import url(https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap);

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    --bg: #F8F9FA;
    --bg2: #E9ECEF;
    --bg3: #DEE2E6;
    --fg: #222;
    --fg2: #595C5F;
    --fg3: #909294;
    --accent-l: #FB9A9F;
    --accent: #BE3B41;
    --accent-d: #76040A;

    --h0: 2.281rem;
    --h1: 2.027rem;
    --h2: 1.802rem;
    --h3: 1.602rem;
    --h4: 1.434rem;
    --h5: 1.255rem;
    --h6: 1.125rem;
    --h7: 1rem;
    --small: 0.889rem;
    --smaller: 0.790rem;

    --sp-lg: 2rem;
    --sp-md: 1rem;
    --sp-sm: 0.5rem;
    --sp-xs: 0.25rem;

    --line-height-s: 1.5;
    --line-height-m: 1.75;
    --line-height-l: 2;

    --sp-margin: 1rem;
}

body {
    background-color: var(--bg3);
    color: var(--fg);
    font-family: Sarabun, sans-serif;
    line-height: var(--line-height-m);
}

.skip-links {
    display: none;
}

.site-container {
    background-color: var(--bg);
    max-width: 960px;
    margin: 0 auto;
}

.site-header {
    display: grid;
    grid-template-columns: 1fr min-content;
    border-bottom: var(--sp-sm) solid var(--accent);
    padding-inline: calc(var(--sp-margin) - 1rem);
}

.site-header__logo {
    height: 3rem;
}

.site-header__logo img {
    height: 2rem;
    margin: 0.5rem;
    width: auto;
}

.site-nav__hamburger-btn {
    height: 2rem;
    margin: 0.5rem 1rem;
    display: block;
}

.site-nav__hamburger-btn svg {
    height: 100%;
    fill: var(--accent-d);
}

.site-nav__hamburger-cb {
    display: none;
}

.site-nav__container {
    display: none;
    grid-column: 1 / -1;

    background-color: var(--accent-d);
    color: var(--bg);
}

.site-nav__nav {
    display: flex;
    flex-direction: column;
    list-style: none;
}

.site-nav__nav > li {
    border-top: 1px solid var(--bg);
    position: relative;
}

.site-nav__nav a {
    display: block;
    color: var(--bg);
    text-decoration: none;
    padding-inline: 1rem;
    line-height: 3rem;
    font-weight: 500;
}

.site-nav__nav a.active {
    background-color: var(--accent-d);
    color: var(--bg);
}

.site-nav__nav a:hover {
    text-decoration: underline;
}

.site-nav__subnav li {
    padding-left: 1rem;
}

.site-nav__nav--button li {
    padding: 0.5rem;
}

.site-nav__nav--button a {
    border: 0;
    background-color: var(--bg);
    color: var(--accent-d);
    border-radius: 0.5rem;
    margin-inline: 0.5rem;
    text-align: center;
    line-height: 2rem;
}

.site-header:has(input.site-nav__hamburger-cb:checked) .site-nav__container {
    display: block;
}

.site-header:has(input.site-nav__hamburger-cb:checked) .site-nav__hamburger-btn--open, .site-header:has(input.site-nav__hamburger-cb:not(:checked)) .site-nav__hamburger-btn--close {
    display: none;
}

.site-header:has(input.site-nav__hamburger-cb:not(:checked)) .site-nav__hamburger-btn--open, .site-header:has(input.site-nav__hamburger-cb:checked) .site-nav__hamburger-btn--close {
    display: flex;
}

.site-main {
    padding: 2rem var(--sp-margin);
}

.site-footer {
    background-color: var(--accent-d);
    padding: 1rem;
    color: var(--bg3);
}

.site-footer {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    font-size: var(--small);
    padding-inline: var(--sp-margin);
}

.site-footer__sitemap {
    display: grid;
    margin-top: -1rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.site-footer__sitemap a {
    color: var(--bg3);
    line-height: var(--line-height-s);
}

.site-footer__sitemap h6 {
    margin-top: 1rem;
    font-size: 1rem;
    line-height: var(--line-height-l);
}

.site-footer__sitemap ul {
    list-style: none;
    margin-left: 1rem;
}

.site-footer__about, .site-footer__info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.site-footer__logo {
    padding-top: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.site-footer__logo-img.logo-cpe {
    width: 30vw;
    max-width: 5rem;
}

.site-footer__logo-img.logo-engineer {
    width: calc(70vw - 3rem);
    max-width: 15rem;
}

.site-footer__copyright {
    border-top: 1px solid var(--bg3);
    padding-top: 1rem;
}

/*region Components*/
.page-span {
    margin-inline: calc(-1 * var(--sp-margin));
    padding-inline: var(--sp-margin) !important;
}

.bg-grey {
    background-color: var(--bg2);
}

.btn {
    --btn-bg: var(--fg2);
    display: inline-block;
    border-radius: 0.25rem;
    text-decoration: none;
    padding: 0.25rem 1rem;
    color: var(--bg);
    background-color: var(--btn-bg);
    font-weight: 500;
}

.btn + .btn {
    margin-inline-start: 0.5rem;
}

.btn-primary {
    --btn-bg: var(--accent-d);
}

.section {
    padding-block: 1rem;
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.jumbotron {
    margin-inline: calc(-1 * var(--sp-margin));
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

.jumbotron img {
    width: 100%;
    max-width: 10rem;
    height: auto;
    margin: 0 auto;
}

.jumbotron main {
    padding: 0 var(--sp-margin);
    border-radius: 0.5rem;
    text-align: center;
}

.jumbotron h1 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: var(--h1);
    line-height: var(--line-height-s);
}

.jumbotron small {
    display: block;
    font-size: var(--small);
    color: var(--fg2);
}

.jumbo-container {
}

.jumbo-item {
    background-color: var(--bg);
    padding: 1rem;
}

.jumbo-item img {
    width: 100%;
    height: auto;
}

.section {
    padding: 1rem;
    margin-bottom: 2rem;
}


.section h2 {
    margin-bottom: var(--sp-md);
    font-size: var(--h3);
}

.section-announcement {
    border: 0.25rem solid var(--accent-d);
    background-color: var(--accent-l);
}

.section-exam {
    background-color: var(--bg2);
}

.section-exam img {
    width: 6rem;
    display: block;
    margin: 0 auto;
}

.section-exam > * {
    text-align: center;
}

.section-exam h2 {
    line-height: var(--line-height-s);
    margin-block: 0 !important;
}

.section.page-span h2 {
    margin-top: var(--sp-md);
    margin-bottom: var(--sp-lg);
}

.section-exam .exam-date {
    color: var(--accent-d);
    margin-bottom: 1rem;
}

.section-exam__action {
    margin-top: 1rem;
}

.section-exam h5 {
    margin-top: var(--sp-lg);
    font-size: var(--h5);
}

.section-exam .date-table {
    display: flex;
    flex-direction: column;
    padding-top: 0.5rem;
}

.exam-info {
    padding: 1rem;
    background-color: var(--bg3);
}


.date-table__row {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--fg3);
    text-align: left;
}

.date-table__row:nth-child(even) {
    background-color: var(--bg);
}

.section-lr {
    display: grid;
    grid-template-columns: 1fr;
}

.page-with-sidebar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.page-with-sidebar__sidebar h5 {
    font-size: var(--h5);
}

.secondary-nav ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
}

.secondary-nav a {
    display: block;
    padding: 0.5rem;
    text-decoration: none;
    color: var(--fg);
    border-bottom: 1px solid var(--fg3);
}

.secondary-nav a:hover {
    color: var(--accent-d);
}


.secondary-nav a.active {
    background-color: var(--accent-d);
    color: var(--bg);
}

.secondary-nav a.active:hover {
    color: var(--bg);
}

.content-action-bar {
    margin: 1rem 0;
}

@media screen and (min-width: 960px) {
    body {
        --sp-margin: 2rem;
    }

    .site-header {
        grid-template-columns: min-content 0 1fr;
    }

    .site-header__id {
        height: 6rem;
    }

    .site-header img {
        height: 5rem;
        margin: 0.5rem;
        width: auto;
    }

    .site-nav__hamburger {
        display: none;
    }

    .site-nav__container {
        display: block;
        grid-column: 2 / -1;
        background-color: var(--bg);
    }

    .site-nav__container ul {
        flex-direction: row;
        justify-content: end;
    }

    .site-nav__container a {
        border: none;
        color: var(--accent-d);
    }

    .site-nav__container ul:not(.site-nav__subnav) li:hover a {
        color: var(--bg);
        background-color: var(--accent-d);
    }

    ul.site-nav__subnav {
        display: none;
    }

    .site-nav__container li:hover .site-nav__subnav, .site-nav__container li:focus-within .site-nav__subnav {
        display: block;
    }

    .site-nav__subnav {
        position: absolute;
        background-color: var(--accent-d);
        width: 10rem;
    }

    .site-nav__subnav li {
        padding: 0;
    }

    .site-nav__subnav a {
        color: var(--bg);
        font-weight: normal;
    }

    .site-nav__nav--button a {
        background-color: var(--accent-d);
        color: var(--bg);
        margin: 0;
        line-height: 2rem;
    }

    .site-footer__logo {
        justify-content: end;
    }

    .site-footer__info {
        flex-direction: row;
        justify-content: space-between;
        align-items: end;
    }

    .section-exam img {
        float: left;
    }

    .section-exam > * {
        text-align: left;
        margin-left: 7rem;
    }

    .date-table__row {
        flex-direction: row;
    }

    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .section-lr {
        grid-template-columns: 1fr 2fr;
    }

    .page-with-sidebar {
        grid-template-columns: 1fr 3fr;
    }

    .page-with-sidebar__sidebar {
        padding-top: 1rem;
    }

    .jumbotron {
        grid-template-columns: 12rem 1fr;
        padding-inline: 5rem 2rem;
        gap: 2rem;
        align-items: start;
    }

    .jumbotron img {
        max-width: unset;
        height: auto;
    }

    .jumbotron main {
        text-align: left;
        padding: 0;
    }
}

.svg-label, .screen-reader-text {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
}

/*region Basic Typography*/
.prose {
    line-height: var(--line-height-m);
}

.prose p {
    overflow-wrap: break-word;
}

.prose a:not(.btn) {
    color: var(--accent-d);
}

.prose a:not(.btn):hover {
    color: var(--accent);
}

.prose ul {
    list-style: disc;
    padding-inline-start: 1.5rem;
}

.prose ol {
    list-style: decimal;
    padding-inline-start: 1.5rem;
}

.prose ol ol {
    list-style: lower-alpha;
}

/*endregion*/

/*region Spacing*/
.prose :is(p, ul, ol) {
    margin-bottom: var(--sp-md);
}

.prose :is(hr, section, figure, blockquote, table, pre, div.highlight, span:has(.katex-display), div.footnotes, .page-toc) {
    margin-bottom: var(--sp-lg);
}

.prose :has(+ :is(hr, section, figure, blockquote, table, pre, div.highlight, span:has(.katex-display), div.footnotes, .page-toc)) {
    margin-bottom: var(--sp-lg);
}

.prose :not(:has(+ *)) {
    margin-bottom: 0 !important;
}

.prose .sp-0 {
    margin-bottom: 0 !important;
}

.prose .sp-1 {
    margin-bottom: var(--sp-sm) !important;
}

.prose .sp-2 {
    margin-bottom: var(--sp-md) !important;
}

.prose .sp-4 {
    margin-bottom: var(--sp-lg) !important;
}
/*endregion*/

/*region Headings*/
:is(.prose, .site-main) :is(h1, h2, h3, h4, h5, h6) {
    line-height: var(--line-height-s) !important;
    font-weight: bold;
}

.prose h1 {
    font-size: var(--h1);
    margin-bottom: var(--sp-md);
}

.prose h2 {
    font-size: var(--h2);
    margin-bottom: var(--sp-md);
}

.prose h3 {
    font-size: var(--h3);
    margin-bottom: var(--sp-sm);
}

.prose h4 {
    font-size: var(--h4);
    margin-bottom: var(--sp-sm);
}

.prose h5 {
    font-size: var(--h5);
    margin-bottom: var(--sp-sm);
}

.prose h6 {
    font-size: var(--h6);
    margin-bottom: var(--sp-sm);
}

/*hack for specificity*/
.prose :has(+ h1), .prose :has(+ h2) {
    margin-bottom: var(--sp-lg);
}

.prose :has(+ h3), .prose :has(+ h4) {
    margin-bottom: var(--sp-md);
}

.prose :has(+ h5), .prose :has(+ h6) {
    margin-bottom: var(--sp-md);
}

.prose :where(h1):has(+ h2), .prose :where(h2):has(+ h3) {
    margin-bottom: var(--sp-md);
}

.prose :where(h3):has(+ h4), .prose :where(h4):has(+ h5) {
    margin-bottom: var(--sp-sm);
}

.prose :where(h5):has(+ h6) {
    margin-bottom: var(--sp-sm);
}

.prose :not(.page-toc, hr):has(+ h1, + h2) {
    margin-bottom: var(--sp-lg);
}

.prose h1:has(+ .single-page__meta) {
    margin-bottom: var(--sp-xs);
}

.prose h1 + .single-page__meta {
    margin-bottom: var(--sp-md);
    font-style: italic;
}

:is(h1, h2, h3, h4, h5, h6).lined {
    padding-bottom: 0.125rem;
    border-bottom: 0.125rem solid var(--accent);
}

.center {
    text-align: center;
}

.prose .big {
    font-size: var(--h6);
}
/*endregion*/

/*region HTML Elements*/
small, sub, sup {
    font-size: var(--small);
}

sup, sub {
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}

sub {
    top: 0.4em;
}

code, kbd, var {
    font-size: var(--small);
    font-family: monospace;
}

kbd {
    background: var(--bg3);
    border-radius: 0.25rem;
    padding: 0.125rem 0.25rem;
}

pre {
    background: var(--bg3);
    padding: .5em;
    overflow-x: auto;
}

hr {
    border: 0;
    width: 50%;
    border-bottom: 0.25rem solid var(--accent-d);
    margin-inline: auto;
}

mark {
    background: var(--accent-l);
    text-decoration: underline wavy;
}

ins {
    text-decoration: underline double;
}

del {
    text-decoration: line-through double;
}

.email {
    display: none;
}

.line-official-img {
    width: 100%;
    max-width: 10rem;
    height: auto;
    border: 0.25rem solid var(--accent-d);
    border-radius: 0.5rem;
}

details {
    padding: 0.5rem;
    border: 0.25rem solid var(--accent-d);
    border-radius: 0.5rem;
}

summary {
    font-weight: bold;
    cursor: pointer;
    font-size: var(--h5);
    margin: 0 !important;
}

details[open] summary {
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.5rem;
    border-bottom: 0.25rem solid var(--accent-d);
}