body.overlay-active {
	overflow: hidden;
}

.bg-gradient {
	background: var(--wp--preset--gradient--gradient-1);
	color: var(--wp--preset--color--white);
}

.bg-main-white {
	background-color: var(--wp--preset--color--background-white);
}

.section-box {
	padding-block: var(--wp--preset--spacing--32);
}

.section-box .group {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--16);
}

/* pagination */
.navigation.pagination {
	margin-block-start: var(--wp--preset--spacing--32);
}

.navigation.pagination .nav-links {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	flex-wrap: wrap;
}

.navigation.pagination .nav-links .page-numbers {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.navigation.pagination .nav-links a {
	background-color: #E8E8E8;
	color: var(--wp--preset--color--primary-1);
}

.navigation.pagination .nav-links .current {
	background-color: var(--wp--preset--color--primary-1);
	color: var(--wp--preset--color--white);
}


/* header */
.site-header {
	background: var(--wp--preset--color--white);
	margin-block-end: var(--wp--preset--spacing--16);
}

.overlay-active .site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 100;
}

.overlay-active.admin-bar .site-header {
	top: 46px;
}

@media (width >=783px) {
	.overlay-active.admin-bar .site-header {
		top: 32px;
	}
}

.current-date-box {
	background: var(--wp--preset--gradient--gradient-1);
	text-align: center;
	color: var(--wp--preset--color--white);
	padding-block: var(--wp--preset--spacing--8);
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.main-header {
	display: grid;
	grid-template-columns: 100px minmax(0, 1fr) 32px;
	grid-template-areas: "logo back menu";
	gap: 16px;
	align-items: center;
	padding-block: var(--wp--preset--spacing--8);
	height: 90px;
}

.main-header .back-button-wrapper {
	grid-area: back;
	justify-self: end;
}

.main-header .back-button-wrapper a {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--16);
	background: var(--wp--preset--color--primary-1);
	color: var(--wp--preset--color--white);
	border-radius: 9999px;
	gap: var(--wp--preset--spacing--8);
}

.main-header .logo-wrapper {
	grid-area: logo;
}

.main-header .social-wrapper {
	grid-area: social;
	display: none;
}

.main-header .menu-wrapper {
	grid-area: menu;
	justify-self: end;
}

.main-header .menu-toggle {
	cursor: pointer;
	padding: 0;
	background: transparent;
	border: none;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-size: 32px;
}

.main-header .main-navigation {
	display: none;
}

@media (width >=992px) {
	.main-header {
		height: auto;
		grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1fr);
		grid-template-areas: "back logo social"
			"menu menu menu";
	}

	.main-header .back-button-wrapper {
		justify-self: start;
		align-self: end;
	}

	.main-header .logo-wrapper {
		justify-self: center;
	}

	.main-header .social-wrapper {
		display: flex;
		justify-content: flex-end;
		align-self: end;
	}

	.main-header .menu-wrapper {
		justify-self: unset;
		border-block-start: 2px solid var(--wp--preset--color--primary-1);
		padding-block-start: var(--wp--preset--spacing--16);
		margin-block-start: var(--wp--preset--spacing--16);
	}

	.main-header .menu-toggle {
		display: none;
	}

	.main-header .main-navigation {
		display: block;
	}
}

/* footer */
.site-footer {
	background: var(--wp--preset--gradient--gradient-1);
	color: var(--wp--preset--color--white);
	padding-block: var(--wp--preset--spacing--32);
}

.site-footer a {
	color: var(--wp--preset--color--white);
}

.site-footer .footer-widget-1,
.site-footer .footer-widget-2,
.site-footer .footer-widget-3 {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--24);
}

.widget *:first-child {
	margin-block-start: 0;
}

.widget *:last-child {
	margin-block-end: 0;
}

.footer-content {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--16);
}

@media (width >=992px) {
	.footer-content {
		display: grid;
		grid-template-columns: 250px minmax(0, 1fr) 250px;
		gap: var(--wp--preset--spacing--32);
	}

	.footer-content .social-footer-wrapper {
		justify-content: flex-end;
	}
}

/* main */
.site-main article.post {
	padding-block-end: var(--wp--preset--spacing--32);
}


/* menu */
.main-menu {
	font-family: var(--wp--preset--font-family--kanit);
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--24);
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--xl);
}

.main-menu a {
	color: var(--wp--preset--color--main-black);
	white-space: nowrap;
}

.main-menu a i {
	margin-inline-start: var(--wp--preset--spacing--4);
}

.main-menu li {
	position: relative;
}

.main-menu > li {
	padding-block-end: var(--wp--preset--spacing--8);
}

.main-menu .sub-menu {
	position: absolute;
	z-index: 10;
	top: 100%;
	left: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--wp--preset--color--white);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
	text-align: center;
	display: none;
	flex-direction: column;
	gap: 0;
}

.main-menu li:hover > a > i {
	transform: rotate(180deg) translateY(-2px);
}

.main-menu li:hover .sub-menu {
	display: flex;
}

.main-menu .sub-menu a {
	display: block;
	width: 100%;
	padding-block: var(--wp--preset--spacing--8);
	padding-inline: var(--wp--preset--spacing--16);
}

.main-menu .sub-menu a:hover {
	background: var(--wp--preset--color--main-black);
	color: var(--wp--preset--color--white);
}

.main-mobile-menu {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--24);
	text-transform: uppercase;
}

.main-mobile-menu a {
	color: var(--wp--preset--color--main-black);
	display: flex;
}

.main-mobile-menu a i {
	margin-block-start: 2px;
	margin-inline-start: auto;
}

.main-mobile-menu .sub-menu {
	display: none;
	margin: 8px 0 0 var(--wp--preset--spacing--16);
	padding: 0;
	list-style: none;
	flex-direction: column;
	gap: var(--wp--preset--spacing--8);
}

.main-mobile-menu .sub-menu.active {
	display: flex;
}

/* social */
.social-wrapper {
	display: flex;
	gap: var(--wp--preset--spacing--8);
}

.social-wrapper a {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-size: 1.5rem;
	color: var(--wp--preset--color--main-black);
}

.social-mobile-wrapper {
	display: flex;
	gap: var(--wp--preset--spacing--8);
	border-block-start: 1px solid #DBDBDB;
	padding-block-start: var(--wp--preset--spacing--16);
	margin-block-start: var(--wp--preset--spacing--16);
}

.social-mobile-wrapper a {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-size: 1.5rem;
	color: var(--wp--preset--color--main-black);
}

.social-footer-wrapper {
	gap: var(--wp--preset--spacing--16);
}

.social-footer-wrapper a {
	color: var(--wp--preset--color--white);
}

/* overlay */
.overlay {
	position: fixed;
	top: 130px;
	left: -100%;
	background: var(--wp--preset--color--white);
	width: 100%;
	height: calc( 100dvh - 130px );
	z-index: 100;
	overflow-y: auto;
}

.overlay-active .overlay {
	left: 0;
}

.admin-bar .overlay {
	top: calc( 130px + 46px );
}

.overlay-content {
	padding: var(--wp--preset--spacing--16);
}

@media (width >=783px) {
	.admin-bar .overlay {
		top: calc( 130px + 32px );
	}
}

.main-category-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--32);
}

.main-category-items-container {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: var(--wp--preset--spacing--32);
}

@media (width >=992px) {
	.main-category-container {
		grid-template-columns: minmax(0, 1fr) 350px;
	}
}

.carousel-category-post-wrapper .swiper-pagination {
	--swiper-pagination-color: var(--wp--preset--color--primary-5);
	--swiper-pagination-bullet-width: 10px;
	--swiper-pagination-bullet-height: 10px;

	position: static;
	margin-block-start: var(--wp--preset--spacing--16);
}

.carousel-archive-category-post-wrapper .swiper-slide {
	width: 100%;
}

.carousel-archive-category-post-wrapper .swiper-pagination {
	--swiper-pagination-color: var(--wp--preset--color--white);
	--swiper-pagination-bullet-width: 10px;
	--swiper-pagination-bullet-height: 10px;

	position: static;
	margin-block-start: var(--wp--preset--spacing--16);
}

/* post template & item */
.item-post-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-block-end: 8px;

	a,
	span {
		font-size: 0.875rem;
		color: var(--wp--preset--color--primary-5);
		background-color: var(--wp--preset--color--primary-6);
		border: 1px solid var(--wp--preset--color--primary-6);
		padding: 2px 8px;
		border-radius: 9999px;

		&:hover,
		&:focus,
		&:active {
			background-color: var(--wp--preset--color--white);
			color: var(--wp--preset--color--main-black);
			border: 1px solid var(--wp--preset--color--primary-6);
		}
	}
}

.item-post {
	display: grid;
	gap: 12px;
	align-items: start;

	&.item-vertical {
		grid-template-columns: minmax(0, 1fr);
	}

	&.item-horizontal {
		grid-template-columns: 150px minmax(0, 1fr);
	}

	&.item-video {
		grid-template-columns: minmax(0, 1fr);

		.item-post-thumbnail {
			aspect-ratio: 4/5;
		}
	}

	&.item-video.item-horizontal {
		@media (width>=768px) {
			grid-template-columns: 250px minmax(0, 1fr);
		}

		@media (width>=992px) {
			grid-template-columns: 480px minmax(0, 1fr);
		}
	}

	.item-post-thumbnail {
		aspect-ratio: 728 / 520;
		overflow: hidden;
		border-radius: 8px;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.item-post-title {
		font-size: clamp(1.125rem, 0.7734rem + 1.1719vw, 1.5rem);
		margin-block-end: 8px;

		a {
			color: inherit;
		}
	}

	.item-post-excerpt {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		margin-block-end: 8px;

		* {
			margin: 0;
		}
	}

	.item-post-date {
		font-size: 0.875rem;
	}
}

.item-slide {
	width: 100%;

	.item-slide-thumbnail {
		width: 100%;
		height: 100%;
		aspect-ratio: 120/63;
		overflow: hidden;
		border-radius: 8px;
		display: block;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}

.item-slide-video {
	width: 100%;

	.item-slide-video-thumbnail {
		width: 100%;
		height: 100%;
		aspect-ratio: 4/5;
		overflow: hidden;
		display: block;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}


.post-template-1 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;

    .item-vertical {
        .item-post-title {
            font-size: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 3;
			line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .item-post-excerpt {
            display: none;
        }

        &:first-child {
            grid-column: span 2;

            .item-post-title {
                font-size: clamp(1.125rem, 0.7734rem + 1.1719vw, 1.5rem);
            }

            .item-post-excerpt {
                display: -webkit-box;
            }
        }
    }

    @media (min-width: 768px) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));

        .item-vertical {
            &:first-child {
                grid-column: span 2;
                grid-row: span 2;
            }
        }
    }
}

.post-template-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;

    .item-horizontal {
        .item-post-title {
            font-size: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 3;
			line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .item-post-excerpt {
            display: none;
        }
    }
}

.post-template-3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;

    .item-horizontal {
        .item-post-title {
            font-size: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 3;
			line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .item-post-excerpt {
            display: none;
        }
    }
}

.post-template-4 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;

    .item-vertical {
        .item-post-title {
            font-size: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 3;
			line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .item-post-excerpt {
            display: none;
        }

        &:first-child {
            grid-column: span 2;

            .item-post-title {
                font-size: clamp(1.125rem, 0.7734rem + 1.1719vw, 1.5rem);
            }

            .item-post-excerpt {
                display: -webkit-box;
            }
        }
    }

    @media (min-width: 768px) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));

        .item-vertical {
            &:first-child {
                grid-column: span 2;
                grid-row: span 2;
            }
        }
    }
}

.post-template-5 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;

    .item-post {
        &.item-horizontal {
            grid-template-columns: 150px minmax(0, 1fr);

            .item-post-excerpt {
                display: none;
            }

            @media (min-width: 768px) {
                grid-template-columns: 250px minmax(0, 1fr);
            }

            @media (min-width: 992px) {
                grid-template-columns: 350px minmax(0, 1fr);

                .item-post-excerpt {
                    display: -webkit-box;
                }
            }
        }
    }
}

.post-template-6 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;

    @media (width>=480px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        .item-post:nth-child(1),
        .item-post:nth-child(2),
        .item-post:nth-child(3),
        .item-post:nth-child(4) {
            grid-column: span 2;
        }
    }

    @media (width>=768px) {
        grid-template-columns: repeat(6, minmax(0, 1fr));

        .item-post {
            grid-column: span 2;
        }

        .item-post:nth-child(1),
        .item-post:nth-child(2),
        .item-post:nth-child(3),
        .item-post:nth-child(4) {
            grid-column: span 3;
        }
    }
}

/* single */
.single-featured-image {
	width: 100%;
	aspect-ratio: 1200 / 630;
	overflow: hidden;
	border-radius: 8px;
}

.single-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.entry-header {
	border-block-end: 1px solid var(--wp--preset--color--primary-1);
	padding-block-end: var(--wp--preset--spacing--16);
}

.entry-title {
	line-height: 1.2;
	margin-block-end: var(--wp--preset--spacing--8);
}

.entry-meta-wrapper {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
}

.entry-meta {
	display: flex;
	flex-direction: row;
	gap: var(--wp--preset--spacing--16);
}

.entry-author {
	color: var(--wp--preset--color--primary-1);
	font-weight: 500;
}

.entry-content-wrapper {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--32);
}

.entry-content *:first-child {
	margin-block-start: 0;
}

.entry-content *:last-child {
	margin-block-end: 0;
}

@media (width>=992px) {
	.entry-content-wrapper {
		grid-template-columns: minmax(0, 1fr) 350px;
	}
}

.entry-tags-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--8);
	padding-block-start: var(--wp--preset--spacing--24);
	position: relative;
	margin-block-start: var(--wp--preset--spacing--32);
	border-block-start: 1px solid var(--wp--preset--color--main-black);
}

.entry-tags-wrapper::before {
	content: '';
	display: block;
	width: 100%;
	height: 3px;
	background-color: var(--wp--preset--color--main-black);
	position: absolute;
	top: 4px;
	left: 0;
}

.entry-tags-title {
	font-size: var(--wp--preset--font-size--xl);
	color: var(--wp--preset--color--primary-5);
}

.entry-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--8);
}

.entry-tags a {
	border: 1px solid var(--wp--preset--color--primary-6);
	border-radius: 9999px;
	padding: 2px 8px;
	color: var(--wp--preset--color--main-black);
	font-size: 0.875rem;
}

.entry-tags a:hover,
.entry-tags a:focus,
.entry-tags a:active {
	background-color: var(--wp--preset--color--primary-6);
	color: var(--wp--preset--color--white);
}

/* search */
.gsc-search-box {
	margin-bottom: 21px;
	padding: 0;
}

.gsc-search-box > tbody > tr {
	display: grid;
	grid-template-columns: 1fr 55px;
}

.gsc-search-box > tbody > tr tr {
	display: grid;
	grid-template-columns: 1fr 45px;
	align-items: center;
}

.gsc-search-box .gsc-input,
.gsc-search-box .gsc-search-button {
	border: 0 none;
	padding: 0;
	margin: 0;
}

.gsc-search-box .gsc-input .gsib_a {
	display: flex;
	align-items: center;
	border: 0 none;
	padding: 0 8px;
	height: 35px;
}

.gsc-search-box .gsc-input .gsib_b {
	border: 0 none;
}

.gsc-search-box .gsc-search-button .gsc-search-button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px 8px;
	width: 55px;
	height: 100%;
	background: var(--wp--preset--color--primary-1);
	margin: 0;
}

.gsc-control-cse {
	padding: 0;
	border: 0 none;
}

.gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b {
	font-family: var(--wp--preset--font-family--default) !important;
	font-size: 20px !important;
	letter-spacing: 0px !important;
}

.gs-webResult div.gs-visibleUrl-breadcrumb {
	font-family: var(--wp--preset--font-family--default) !important;
	font-size: 14px;
}

.gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet, .gs-fileFormatType {
	font-family: var(--wp--preset--font-family--default) !important;
	font-size: 14px !important;
}

.gs-web-image-box, .gs-promotion-image-box {
	padding: 2px 2px 2px 0 !important;
	margin-right: 10px !important;
	width: 100px !important;
}

.gs-web-image-box .gs-image, .gs-promotion-image-box .gs-promotion-image {
	max-width: 100px !important;
	max-height: 120px !important;
}

.gsc-results .gsc-cursor-box .gsc-cursor-page {
	font-family: var(--wp--preset--font-family--default) !important;
	font-size: 14px !important;
}

.see-all-box {
	margin-block-start: auto;
	padding-block-start: 16px;
	text-align: right;
}

.see-all-box .see-all-link {
	color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--primary-1);
	padding: 8px 16px;
	border-radius: 9999px;
}