/*
-----------------------------------------------
Template: Renique Blogger Template
Name:  Ceyron Louis
Designer Url - https://www.oddthemes.com
----------------------------------------------- */

/* Variables starting
(Removed for standard CSS)
*/

/*-------------------------
Reset
------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, .section, .widget {margin: 0; padding: 0; border: 0; vertical-align: baseline;}
table {border-collapse: collapse; border-spacing: 0;}


/*-------------------
Page
-------------------*/

.site-wrap {
	width: 100%;
	background: #FDFCFB;}

.outer-wrap {
	width: 1000px;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;}

.inner-wrap {
	width: auto;
	margin: 0;
	padding: 0;}

.main-wrap {
	width: 100%;
	margin: 0 auto;
	padding: 0;}

.instagram-wrap,
.footer-wrap {
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: justify;}

@media screen and (max-width: 850px) {
.categories-wrap #categories .Image {
    margin-right: 10px !important;
    margin-bottom: 10px !important;
}
.categories-wrap .widget.Image h2 {
    font-size: 16px !important;
}
.categories-wrap .widget.Image img {
    width: 38px !important;
    height: 38px !important;
}
.home-title{
	font-size:25px !important;
}



    .outer-wrap {width: 90%; margin: 0 auto;}
    .main-wrap {width: 100%; float: none;}}

@media screen and (min-width: 851px) and (max-width: 1150px) {

    .outer-wrap {width: 90%; margin: 0 auto;}
    .main-wrap {width: 70%;}}


/*-------------------
Blog Content
-------------------*/

body {
	font-family: 'Karla', sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: #000000;
	letter-spacing: 0px;
	overflow-x: hidden;}

a {
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;}

a,
a:visited,
a:hover {
	text-decoration: none;}

.post-body a {
	font-weight: 400;
	text-decoration: none;
	color: #e3c9bf;
	position: relative;}

.post-body a:hover {
	color: #000000;
	text-decoration: none;}

.separator a {
	max-width: 100%;
	height: auto;
	margin-right: 0em !important;
	margin-left: 0em !important;}

a img {
	display: block;
	position: static !important;
	border-bottom: 0 !important;}

.post-body {
	width: 100%;
	text-align: justify;
	line-height: 1.6;
	position: relative;}

.post-body img,
.post-body a img {
	max-width: 100% !important;
	height: auto;
	margin: 0 !important;
	float: none !important;
	display: inline !important;}

.post-body ol {
	padding: 0 0 0 2.5em;
	list-style: decimal;
	list-style-type: decimal;}

.post-body h1,
.post-body h2 {
	font-family: 'Bodoni Moda', serif;
	font-weight: 400;
	letter-spacing: -1px;}

.post-body p {
	margin: 15px 15%;}

.video_outer_wrap {
	width: 100%;
	max-width: 100%;}

.video_wrap {
	position: relative;
	padding-bottom: 56%;
	padding-top: 0px;
	height: 0;
	background-color: #FDFCFB !important;}

.video_wrap iframe,
.video_wrap object,
.video_wrap embed {
	width: 100%;
	height: 100%;
	top: 0;
	position: absolute;}

iframe,
.YOUTUBE-iframe-video {
	max-width: 100%;}

input, textarea {
	outline: 0;
	-webkit-appearance: none;
	-webkit-border-radius: 0;}

input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #FDFCFB inset;}

.widget-item-control {
	height: 0px;}

@media screen and (max-width: 550px) {
	.post-body p {margin: 15px 30px;}}


/*-------------------
Social & Search
-------------------*/

.top-wrap {
	width: 100%;
	height: 60px;
	top: 0;
	left: 0;
	margin: 0 auto;
	padding: 0;
	z-index: 9;
	position: fixed;
	background: transparent;
	border: 0;
	text-align: center;}

#HTML97 {
	width: 40%;
	text-align: left;
	float: left;
	padding-left: 20px;}

#HTML98 {
	width: 40%;
	float: right;
	padding-right: 25px;}

#HTML97 .widget-content {
	width: auto;
	height: 60px;
	line-height: 60px;
	display: inline-block;
	vertical-align: middle;}

.top-socialmedia a {
	font-size: 9.5px;
	margin: 0 5px !important;
	display: inline-block;
	color: #000000;}

.top-socialmedia a:hover {
	color: #e3c9bf;}

.search {
	width: 130px;
	margin: 20px 0 0 auto;
	padding: 0;
	background: transparent;
	vertical-align: middle;
	border: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

.searchbox {
	width: 86%;
	height: 20px;
	float: left;
	background: transparent;
	border: 0;
	border-bottom: 1px solid #000000;
	color: #000000;
	font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0px;
    text-align: left;}

.searchsubmit {
	width: 10%;
	height: 20px;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	float: right;
	font-size: 9.5px;
	text-align: right;
	color: #000000;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;}

.searchsubmit:hover {
	color: #e3c9bf;}

.search input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px #FDFCFB inset !important;}

@media screen and (max-width: 1000px) {
	.top-wrap {position: relative;}}


/*-------------------
Header
-------------------*/

.header-wrap {
	width: 90%;
	height: auto;
	margin: 0 auto 20px;
	padding: 50px 5% 0;
	position: relative;
	background: #FDFCFB;
	border: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

.header-wrap .widget {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	display: inline-block;
	text-align: center;}

.Header h1 {
	font-family: 'Bodoni Moda', serif;
	font-weight: 400;
	font-size: 60px;
	letter-spacing: -1px;
	color: #000000;
	margin: 0;}

.Header h1 a,
.Header h1 a:visited,
.Header h1 a:hover {
	color: #000000;}

.Header img {
	text-align: center;
	width: auto;
	margin: 0 auto;}

.description {
	font-family: 'Karla', sans-serif;
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0px;
	text-transform: uppercase;
	color: #000000;
	margin: 0;}

@media screen and (max-width: 1000px) {
	.header-wrap {padding: 20px 5% 0;}}


/*-------------------
Navigation
-------------------*/

.menu-wrap {
	width: 100%;
	height: 40px;
	margin: 0 auto 40px;
	padding: 0;
	z-index: 9;
	position: relative;
	background: transparent;
	border: 0;
	text-align: center;}

.menu-wrap a,
.menu-wrap a:visited {
	color: #000000;
	margin: 0;
	padding: 0;}

.menu-wrap a:hover {
	color: #e3c9bf;}

.menu-wrap h2 {
	display: none !important;}

.menu-wrap .widget {
	width: auto;
	height: 40px;
	margin: 0 auto;
	padding: 0;
	line-height: 40px;
	display: inline-block;
	vertical-align: middle;}

.menu-wrap #LinkList1 {
	font-family: 'Karla', sans-serif;
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0px;
	text-transform: uppercase;}

.menu-wrap li,
.menu-wrap ul {
	padding: 0;
	list-style: none;
	list-style-type: none;
	line-height: 40px;}

.menu-wrap li {
	margin: 0 15px;
	display: inline-block;
	position: relative;
	cursor: pointer;}

.menu-wrap .level-two {
	width: 130px;
	left: 50%;
	margin: -10px 0 0 -30px;
	position: absolute;
	border: 0;
	display: none;
	text-align: left;
	z-index: 99;}

.menu-wrap .level-three {
	width: 130px;
	top: 0;
	left: 130px;
	position: absolute;
	border: 0;
	display: none;
	text-align: left;
	z-index: 99;}

.menu-wrap .Label .level-two {
	max-height: 250px;
	overflow-y: auto;}

.menu-wrap .level-two li,
.menu-wrap .level-three li {
	margin: 0;
	display: block;
	line-height: normal;}

.menu-wrap .level-two li a,
.menu-wrap .level-three li a {
	background: #e3c9bf;
	color: #000000;
	padding: 9px 10px;
	display: block;}

.menu-wrap .level-two li a:hover,
.menu-wrap .level-three li a:hover {
	background: #000000;
	color: #ffffff;}

.menu-wrap li.parent:hover .level-two,
.menu-wrap .child-item.sharewidth:hover .level-three {
	display: block;}

.menu-wrap .fa.fa-fw.fa-angle-down,
.menu-wrap .fa.fa-fw.fa-angle-right,
.menu-wrap .level-three a:after {
	display: none;}

.menu-wrap li.child-item.sharewidth a:after {
	content: "\f105";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 8px;
	margin: 0 0 0 5px;}

.menu-wrap li > a:after {
	content: "\f107";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 8px;
	margin: 0 0 0 5px;}

.menu-wrap li > a:only-child:after {
	content: '';
	margin: 0;}

@media screen and (min-width: 901px) {
    #nav-wrap {
        visibility: hidden;
    }
	.sidemenu {display: none;}
	}

@media screen and (max-width: 900px) {
	.sidemenu {margin: 0 auto !important; padding: 0; width: auto; height: 50px; overflow: hidden; display: block;
		appearence: none; font-size: 12px; box-shadow: none; border: none; cursor: pointer; transition: background 0.3s;
		position: relative; background: transparent; color: #000000;}
	.sidemenu span {font-family: 'Karla', sans-serif; font-weight: 400; font-size: 12px; letter-spacing: 0px; text-transform: uppercase;}
	.sidemenu i {font-size: 9.5px; margin-left: 7px;}
.sidemenu {
    display: none !important;
}
	.sidemenu:focus {outline: none;}
	.menu-wrap {width: 100%; height: auto; position: relative; text-align: center; }
	.menu-wrap .menu {display: none; padding: 0 0 15px;}
	.menu-wrap ul {padding: 0;}
	.menu-wrap li, .menu-wrap .widget {display: block; height: auto; line-height: 35px; margin: 0;}
	.menu-wrap .level-two {width: 95%; left: 0; position: relative; margin: 0 2.5%; text-align: center; border: 0px;}
	.menu-wrap .level-three {width: 90%; left: 0; position: relative; text-align: center; margin: 0 5%; border: 0px;}
	.menu-wrap .Label .level-two {max-height: none; overflow-y: visible;}
	.menu-wrap li.parent:hover .level-two, .menu-wrap .child-item.sharewidth:hover .level-three {display: none;}
	.menu-wrap .fa.fa-fw.fa-angle-down, .menu-wrap .fa.fa-fw.fa-angle-right {color: transparent !important;
		position: absolute; top: 0; left: 0; width: 100%; display: block; height: 35px; z-index: 5;}
	.menu-wrap .level-three a:after {display: none;}
	.menu-wrap li.child-item.sharewidth a:after {content: "\f105";}}


/*-------------------
Slider
-------------------*/

.slider-wrap {
	margin: 0 auto 50px;}

ul.slide-posts {
	margin: 0;
	padding: 0;}

.slide-posts {
	margin: 0 !important;}

li.slide-post {
	margin: 0;
	padding: 0 !important;
	position: relative;}

.slide-thumb {
	width: 100%;
	height: 500px;
	background-size: cover !important;
	background-position: 50% 50% !important;}

.slide1 {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: block;
	position: absolute;
	text-align: center;
	background: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.2) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

.slide2 {
	width: 100%;
	height: 100%;
	display: table;}

.slide3 {
	width: 100%;
	height: 100%;
	display: table-cell;
	vertical-align: bottom;}

.slide4 {
	max-width: 50% !important;
	margin: 0 auto 5%;
	padding: 0;
	background: none;
	display: inline-block;
	position: relative;
	z-index: 5;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

.slide-date {
	font-family: 'Bodoni Moda', serif;
	font-weight: 400;
	font-style: italic;
	font-size: 12px;
	letter-spacing: 1px;
	color: #FFFFFF;
	margin-bottom: 4px;
	position: relative;
	z-index: 5;}

.slide-title {
	font-family: 'Bodoni Moda', serif;
	font-weight: 400;
	font-size: 35px;
	letter-spacing: -1px;
	color: #FFFFFF;
	position: relative;
	margin: 0 0 20px;
	z-index: 5;}

.slide-snippet {
	font-family: 'Karla', sans-serif;
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0px;
	color: #FFFFFF;
	line-height: 20px;
	position: relative;
	margin: 0 0 30px;
	z-index: 5;}

.slide-button {
	font-family: 'Karla', sans-serif;
	font-weight: 400;
	font-size: 12px;
    letter-spacing: 0px;
	text-transform: uppercase;
	-webkit-font-smoothing: subpixel-antialiased;
	position: relative;
	margin: 0;
	z-index: 5;}

.slide-button span {
	background: #e3c9bf;
	color: #000000;
	padding: 8px 12px;}

.slide-button span:hover {
	color: #ffffff;
}

.slick-dots {
	bottom: 5px;}

.slick-dots li {
	margin: 0px !important;}

.slick-dots li button:before {
	font-size: 7px !important;}
	ul.slick-dots {
	margin: 0 !important;
	padding: 0 !important;}

.slick-dots li.slick-active button:before {
	opacity: 1 !important;
	color: #000000 !important;}

.slick-dots li button:before {
	opacity: 1 !important;
	color: #ffffff !important;}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
	color: #000000 !important;}

@media screen and (max-width: 500px) {
	.slide4 {max-width: 85% !important; margin: 0 auto 13%;}}

@media screen and (min-width: 501px) and (max-width: 850px) {
	.slide4 {max-width: 70% !important; margin: 0 auto 10%;}}





/*-------------------
Homepage Posts
-------------------*/

.post-thumb {
	width: 100%;
	padding-bottom: 500px;
	background-size: cover !important;
	background-position: 50% 50% !important;}

.postthumb img {
	display: none !important;}

.post1 {
	width: 100%;
	padding: 30px 15% 40px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

.home-date {
	font-family: 'Bodoni Moda', serif;
	font-weight: 400;
	font-style: italic;
	font-size: 12px;
	letter-spacing: 1px;
	color: #000000;
	text-align: center;}
.home-comments {
  font-family: 'Bodoni Moda', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 1px;
  color: #000000;
  text-align: center;
  margin-bottom: 15px; /* Tạo khoảng cách với tiêu đề bên dưới */
}
.home-comments a {
  color: inherit;
}
.home-comments a:hover {
  color: #000000;
}
.home-title {
	font-family: 'Bodoni Moda', serif;
	font-weight: 400;
	font-size: 35px;
	letter-spacing: -1px;
	color: #000000;
	text-align: center;
	margin: 3px 0 20px;}

.home-title a,
.home-title a:visited {
	color: #000000 !important;}

.home-title a:hover {
	color: #000000 !important;}

.home-summary {
	color: #000000;
	text-align: justify;
    text-align-last: center;}

.home-button {
	font-family: 'Karla', sans-serif;
	font-weight: 400;
	font-size: 11px;
	letter-spacing: .5px;
	text-transform: uppercase;
	text-align: center;
	margin: 30px 0 0;}

.home-button a {
	color: #000000;
    background: #e3c9bf;
    padding: 9px 15px;}

.home-button a:hover {
	background: #000000;
	color: #ffffff;}

@media screen and (max-width: 850px) {
	.postthumb, .post1 {width: 100%;}
	.post1 {padding: 30px 5% 40px;}}


/*-------------------
Blog Posts
-------------------*/

.post-header {
	margin-bottom: 30px;
	text-align: center;}

.post-header .post-date {
	font-family: 'Bodoni Moda', serif;
	font-weight: 400;
	font-style: italic;
	font-size: 12px;
	letter-spacing: 1px;
	color: #000000;}

.post-header .post-title {
	font-family: 'Bodoni Moda', serif;
	font-weight: 400;
	font-size: 35px;
	line-height: 35px;
	letter-spacing: -1px;
	color: #000000;
	margin: 10px 20px !important;}

.post-location {
	font-family: 'Karla', sans-serif;
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0px;
	text-transform: uppercase;
	color: #000000;}

.post-footer {
	font-family: 'Karla', sans-serif;
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0px;
	text-transform: uppercase;
	color: #000000;
	text-align: center;
	margin: 50px auto 20px;}

.post-footer a {
	color: #000000;}

.post-footer a:hover {
	color: #e3c9bf;}

.post-share {
	margin-top: 10px;}

.post-share span {
	display: block;}

.post-share a {
	font-size: 9.5px;
	margin: 8px !important;
	display: inline-block;}

.post-labels a {
	color: #000000;}

.post-labels a:hover {
	color: #e3c9bf;}

blockquote {
	font-family: 'Bodoni Moda', serif;
	font-weight: 400;
	font-size: 25px;
	letter-spacing: -1px;
	text-align: center;
	margin: 20px 0;
	padding: 0px 22%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

.status-msg-wrap {
	font-family: 'Bodoni Moda', serif;
	font-weight: 400;
	font-size: 25px;
	letter-spacing: -1px;
	color: #000000;
	text-align: center;
	width: auto;
	margin: 0 auto 30px;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

@media screen and (max-width: 550px) {
	blockquote {padding: 0px 45px;}}


/*-------------------
Post Pager
-------------------*/

.post-pager {
	width: 100%;
	display: block;
	margin: 0 0 30px;}

.previous {
	width: 49%;
	float: left;
	text-align: left;}

.next {
	width: 49%;
	float: right;
	text-align: right;}

.pager-info {
	width: 100%;
	display: block;}

.next-post,
.prev-post {
	font-family: 'Karla', sans-serif;
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0px;
	text-transform: uppercase;
	color: #000000;
	text-shadow: none;}

.next .pager-title {
	width: 90%;
	margin: 0;
	display: inline-block;
	vertical-align: bottom;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

.previous .pager-title {
	width: 90%;
	margin: 0;
	display: inline-block;
	vertical-align: top;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

.post-pager .prev-title,
.post-pager .next-title {
	font-family: 'Bodoni Moda', serif;
	font-weight: 400;
	font-size: 20px;
	letter-spacing: -1px;}

.post-pager a,
.post-pager a:visited {
	color: #000000;}

.post-pager a:hover {
	color: #e3c9bf;}

@media screen and (max-width: 700px) {
	.previous .pager-title {margin: 0px 0 0 10px;}
	.post-pager {margin: 0 0 50px 0;}}


/*-------------------
Related Posts
-------------------*/

.relatedposts {
	width: 104%;
	margin: 0 0 0 -2% !important;
	padding-bottom: 0!important;
	background: #FDFCFB;}

.relatedtitle {
	font-family: 'Karla', sans-serif;
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0px;
	text-transform: uppercase;
	color: #000000;
	text-align: center;
	margin: 0 auto 20px;}

.relatedpost {
	width: 29.33%;
	margin: 0 2%;
	float: left;
	position: relative;}

.related-wrap .relatedthumb {
	width: 100%;
	padding-bottom: 130%;
	background-size: cover !important;
	background-position: 50% 50% !important;}

.related-wrap .related-title {
	font-family: 'Bodoni Moda', serif;
	font-weight: 400;
	font-size: 23px;
	letter-spacing: -1px;
	color: #000000;
	text-align: center;
	margin: 15px 0 0;}

.related-wrap .related-title:hover {
	color: #e3c9bf;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;}

@media screen and (max-width: 700px) {
	.relatedpost {width: 100%; margin-bottom: 20px;}}


/*-------------------
Comments
-------------------*/

.comments {
	margin: 60px 0 40px;
	font-weight: 400;}

.comments h4 {
	font-family: 'Karla', sans-serif;
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0px;
	text-transform: uppercase;
	color: #000000;
	text-align: center;
	margin: 0 5px;
	padding-bottom: 10px;}

.comments .comment {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

.comments .comment-content {
	padding: 0px;}

.comment-replies .comment {
	margin: 20px 0 !important;
	padding: 0 0 10px !important;;}

.comments .comments-content .user a {
	font-family: 'Karla', sans-serif;
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0px;
	text-transform: uppercase;
	color: #000000;
	margin-bottom: 0px;
	display: block;}

.comments .comments-content p.comment-content a {
	text-decoration: none;
	color: #e3c9bf;}

.comments .thread-count,
.comments .comment-actions,
.comments .continue,
.comments .comments-content .datetime {
	font-family: 'Karla', sans-serif;
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0px;
	text-transform: uppercase;
	margin-left: 0;
	padding: 3px 0;}

.comments .comments-content .datetime {
	display: block;
	margin-top: 0px;}

.comments .comments-content .datetime a {
	color: #000000;}

.comments .comment-actions a:hover {
	text-decoration: none!important;}

.comments .continue a {
	display: block;
	padding: 0;}

.comments .comment-block {
	margin: 0;
	padding-bottom: 10px;}

.comments .avatar-image-container {
	display: none;}

.comments .thread-count a,
.comments .comment .comment-actions a,
.comments .continue a {
    color: #000000 !important;}

.comment-replies .comment {
    margin: 20px 0 0 !important;
    padding: 0 !important;}

.comments .continue a {
    font-weight: 400 !important;}


/*-------------------
Newsletter
-------------------*/

.newsletter-wrap {
	width: 800px;
	height: auto;
	margin: 0px auto 50px;
	padding: 50px;
	background: #e3c9bf;
	text-align: center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

.newsletter-heading {
	font-family: 'Bodoni Moda', serif;
	font-weight: 400;
	font-size: 25px;
	letter-spacing: -1px;
	color: #000000;}

.newsletter-caption {
	font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 14px;
	letter-spacing: 0px;
	color: #444444;}

#HTML3 h2 {
	display: none;}

#HTML3 .widget-content {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	border: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

#mc_embed_signup {
	width: 100%;
	margin: 30px auto 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

#mc_embed_signup .mc-field-group #mce-FNAME {
	width: 23%;
	height: 35px;
	margin: 0 2% 0 0;
	padding: 0;
	color:#fff;
	float: left;
	background: transparent;
	border: 1px solid #000000;
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: 12px;
	letter-spacing: 0px;
	text-transform: uppercase;
	text-align: center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

#mc_embed_signup .mc-field-group #mce-EMAIL {
	width: 50%;
	height: 35px;
	margin: 0;
	color:#fff;
	padding: 0 0 0 5px;
	float: left;
	background: transparent;
	border: 1px solid #000000;
	font-family: 'Karla', sans-serif;
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0px;
	text-transform: uppercase;
	text-align: center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

#mc_embed_signup .button {
	width: 23%;
	height: 35px;
	margin: 0;
	padding: 0;
	float: right;
	background: #e3c9bf;
	border: 1px solid #000000;
	border-radius: 0;
	font-family: 'Karla', sans-serif;
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0px;
	text-transform: uppercase;
	text-align: center;
	color: #000000;
	text-align: center;
	-webkit-transition: all 0.1s ease;
	-moz-transition: all 0.1s ease;
	-ms-transition: all 0.1s ease;
	-o-transition: all 0.1s ease;
	transition: all 0.1s ease;}
#mc_embed_signup div.mce_inline_error {
    color: #c80a0a !important;
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
}
#mc_embed_signup .button:hover {
	background: #e3c9bf;
	color: #000000;
	cursor: pointer;}

#mc_embed_signup ::placeholder {
	color: #000000 !important;
	opacity: 1 !important;}

#mc_embed_signup :-ms-input-placeholder {
	color: #000000 !important;}

#mc_embed_signup ::-ms-input-placeholder {
	color: #000000 !important;}

@media screen and (max-width: 950px) {
	.newsletter-wrap {width: 85%;}}

@media screen and (max-width: 750px) {
	#mc_embed_signup .mc-field-group #mce-FNAME,
	#mc_embed_signup .mc-field-group #mce-EMAIL {width: 100%; margin: 2px 0;}
	#mc_embed_signup .button {width: 100%; margin: 2px 0 0 0;}}

@media screen and (max-width: 500px) {
	.newsletter-wrap {padding: 50px 30px;}}


/*-------------------
Pager
-------------------*/

#blog-pager {
	font-family: 'Bodoni Moda', serif;
	font-weight: 400;
	font-style: italic;
	font-size: 12px;
	letter-spacing: 1px;
	text-align: center;
	margin: 0;}

#blog-pager a,
#blog-pager a:visited {
	display: inline-block;
	color: #000000;}

#blog-pager a:hover {
	color: #e3c9bf;}


/*-------------------
Instagram
-------------------*/

.instagram-wrap {
	width: 100%;
	height: auto;
	margin: 40px 0 0 0 !important;
	padding: 0;}

.instawrap {
	width: 1000px;
	height: auto;
	margin: 0 auto;
	text-align: center;}

#HTML99 h2 {
	display: none !important;}

#HTML99 {
	width: 100%;
	height: auto;
	margin: 0
	padding: 0;}

@media screen and (max-width: 1050px) {
	.instawrap {width: 90%;}}


/*-------------------
Footer
-------------------*/

.footer-wrap {
	width: 100%;}

.footerbox {
	width: 1000px;
	margin: 40px auto 20px;
	display: table;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

#LinkList2 {
	font-family: 'Karla', sans-serif;
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0px;
	text-transform: uppercase;
	text-align: center;}

#LinkList2 li, #LinkList2 ul {
    padding: 0;
    list-style: none;
    list-style-type: none;
    line-height: 20px;}

#LinkList2 li {
    margin: 0 15px;
    display: inline-block;
    position: relative;}

#LinkList2 a {
	color: #000000;}

#LinkList2 a:hover {
	color: #e3c9bf;}

@media screen and (max-width: 1050px) {
	.footerbox {width: 90%;}}


/*-------------------
Credits
-------------------*/

.credit {
	font-family: 'Karla', sans-serif;
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0px;
	text-transform: uppercase;
	color: #000000;
	text-align: center;
	width: 100% !important;
	height: 50px;
	line-height: 50px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

.credit a,
.credit a:visited {
	color: #000000;}

.credit a:hover {
	color: #e3c9bf;}

.credit i {
	font-size: 9px;
	margin: 0 5px;}


/*-------------------
Additional
-------------------*/

#Navbar1,#Attribution1,.quickedit,.zippy,.feed-links,.top-wrap h2, .menu-wrap h2,.slider-wrap h2,.item-snippet,.comments .comments-content .icon.blog-author,.PopularPosts .item-title {
	display: none !important;}

::-moz-selection {
	background: #e3c9bf;
	color: #000000;}

::selection {
	background: #e3c9bf;
	color: #000000;}

::-webkit-scrollbar {
	width: 7px;}

::-webkit-scrollbar-track {
	background: #FDFCFB;}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:window-inactive {
	background: #e3c9bf;}

.cookie-choices-info {
	background: #FDFCFB !important;
	border-bottom: 1px solid #e3c9bf;}

.cookie-choices-info .cookie-choices-text {
	font-family: 'Karla', sans-serif;
	font-weight: 400;
	font-size: 14px !important;
	letter-spacing: 0px;
	color: #000000 !important;}

.cookie-choices-info .cookie-choices-button {
	font-family: 'Karla', sans-serif;
	font-weight: 400 !important;
	font-size: 12px !important;
	letter-spacing: 0px;
	color: #000000 !important;}

.cookie-choices-info #cookieChoiceDismiss {
	font-family: 'Karla', sans-serif;
	font-weight: 400;
	font-size: 12px !important;
	letter-spacing: 0px;
	color: #000000 !important;}

.scroll {
	right: 20px;
	bottom: 50px;
	padding: 0;
	position: fixed;
	border: 0;
	font-size: 25px;
	color: #e3c9bf;
	cursor: pointer;}

.scroll:hover {
	color: #000000;
	-webkit-transition: all 0.1s ease;
	-moz-transition: all 0.1s ease;
	-ms-transition: all 0.1s ease;
	-o-transition: all 0.1s ease;
	transition: all 0.1s ease;}







.home-button {
  transform: skewX(-20deg);
    padding: 0px 7px;
    margin: 20px auto;
    transition: background-color 0.3s ease;
}

.home-button a {
  transform: skewX(20deg);
    font-family: sans-serif;
}
.home-button span {
    transform: skewX(20deg);
    display: inline-block;
}



.slide-button {
    display: inline-block;
    background: #e3c9bf;
    transform: skewX(-20deg);
    padding: 0 6px;
}
.slide-button span {
    display: inline-block;
    transform: skewX(20deg);
}
.slide-button:hover{
	background: #000000;
}
.slide-button:hover span {
    background: #000000;
}

.categories-wrap {
  	padding: 10px 0px 30px 0px;
    max-width: 1000px;
    text-align: center;
    margin: 0 auto;
	width: 90%;
}

.categories-wrap .widget.Image a {
  display: inline-flex;
  align-items: center;

  border-radius: 50px;
  text-decoration: none;
  padding: 5px 15px 5px 5px;
  transition: background 0.3s ease;
  max-width: 100%;
}

.categories-wrap .widget.Image a {
  background-color: #eaeaea;
}


.categories-wrap .categories-caption {
  display:none;
}
.categories-wrap #categories .Image {
    display: inline-flex;
    margin-right: 30px;
	margin-bottom: 30px;
}
div#categorytitle {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#categorytitle .widget-content {
    font-size: 30px;
}
.categories-wrap .widget.Image a:hover {
    background-color: #e3c9bf;
}



.categories-wrap .widget.Image {
  display: inline-flex;
  align-items: center;
  border-radius: 50px;
  max-width: 100%;
}

.categories-wrap .widget.Image h2 {
  font-size: 20px;
  font-weight: 400;
  color: #333;
  order: 2;
    margin-left: 10px;
}

.categories-wrap .widget.Image img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
}


.newsletter-wrap,
.instagram-wrap {
  display: none;
}
.description {
  font-family: 'Raleway', sans-serif !important;
  font-size: 14px !important;
}
.post-thumb:empty {
  display: none;
}
.home-title {
  font-family: 'Source Serif 4', sans-serif !important;
}
.home-summary {
  font-family: 'Cormorant Upright', sans-serif !important;
}
.post-header {
  font-family: 'Source Serif 4', serif !important;
}
.post-body {
  font-family: 'Niramit', serif !important;
  font-size: 22px !important;
}
/* --- Mã CSS cuối cùng, ổn định nhất --- */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  color: #f73e05;
  font-size: 85%;
}

/* Đã xóa .tooltip ở selector này */
.tooltiptext {
  /* Trạng thái ẩn */
  visibility: hidden;
  opacity: 0;

  /* Định vị */
  position: absolute; /* Quan trọng để không làm xô lệch văn bản */

  /* Định dạng */
  width: 380px;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 10px;
  z-index: 9999;
  transition: opacity 0.2s, visibility 0.2s;
  font-size: 20px;
  line-height: 1.5;
  max-height: 450px;
  overflow-y: auto;
}

/* Đã xóa .tooltip ở selector này */
.tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

/* Đã xóa .tooltip ở selector này */
.tooltiptext.show {
  visibility: visible;
  opacity: 1;
}
/* --- Mã CSS dành riêng cho di động --- */
@media screen and (max-width: 480px) {
  .tooltiptext {
    /* Chiếm 90% chiều rộng màn hình thay vì 380px cố định */
    width: 90vw;

    /* Giảm kích thước chữ một chút cho dễ đọc */
    font-size: 16px;
  }
}
/* Áp dụng cho màn hình có chiều rộng tối đa là 768px (máy tính bảng và điện thoại) */
@media screen and (max-width: 768px) {
  .post-body.entry-content {
    /* Giữ lại dòng này để font chữ dễ đọc trên di động */
    font-family: Verdana, Tahoma, sans-serif;

    /* Chỉ sửa dòng này */
    font-size: 17px !important;
  }
}
/* Tùy chỉnh font cho tiêu đề và categories box */

/* Áp dụng font Xanh Mono cho tiêu đề bài viết */
h1.title {
  font-family: 'Xanh Mono', monospace !important;
  word-spacing: -15px; /* Thêm dòng này để kéo các từ lại gần nhau */
}

/* Áp dụng font Roboto Flex cho khu vực Top Categories */
.categories-box {
  font-family: 'Roboto Flex', sans-serif !important;
}
/* ----- BẢN SỬA LỖI CUỐI CÙNG (PHƯƠNG PHÁP MẠNH HƠN) ----- */

/* 1. TĂNG khoảng cách bằng cách ĐẨY CẢ WIDGET đi xuống */
div#Text1 {
    margin-top: 20px !important;
}


/* 2. TÙY CHỈNH CHO TOÀN BỘ WIDGET GIỚI THIỆU */
/* --- Sửa khoảng cách cho Widget Giới thiệu --- */
#Text1 h2.title {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 400 !important;
    margin-bottom: 5px !important; /* << TẠO KHOẢNG CÁCH DƯỚI TIÊU ĐỀ */
}

#Text1 .widget-content {
    font-family: 'Oswald', sans-serif !important;
    font-weight: 300 !important;
    font-size: 19px !important;
    white-space: pre-line !important;
    line-height: 1.0 !important; /* << Bạn có thể thử lại 1.5, 1.6, 1.7, 1.8 xem cái nào vừa mắt */
    margin-top: -5px !important; /* << BỎ margin-top âm */
    position: static !important; /* << TRẢ LẠI vị trí tĩnh bình thường */
    /* Không cần 'top' nữa */
}

#Text1 .widget-content a {
    color: #FFA500 !important;
    font-weight: 400 !important;
}

#Text1 .widget-content a:hover {
    color: #E69500 !important;
}
/* --- TÙY CHỈNH CHO TIÊU ĐỀ "THỂ LOẠI" --- */

/* Giảm khoảng cách bên trên của cả khối "THỂ LOẠI" */
div#HTML1 {
    margin-top: 40px !important;
}

/* Đổi font và căn giữa cho chữ "THỂ LOẠI" */
div#HTML1 .widget-content {
    font-family: 'Sigmar', cursive !important; /* Đã đổi sang font Sigmar */
	font-size: 25px !important;
    text-align: center !important;
color: #453f30 !important; /* Thêm dòng này để đổi màu xám nhạt hơn */
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3) !important; /* Thêm dòng này để tạo bóng */
}
/* Tăng khoảng cách dưới khu vực Thể Loại */
.categories-wrap {
  margin-bottom: 20px !important;
}
/* --- CSS CHO THANH ĐIỀU HƯỚNG CHƯƠNG (PHIÊN BẢN HOÀN CHỈNH) --- */
.chapter-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 800px;
  margin: 40px auto;
  padding: 10px 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.chapter-nav a {
  color: #555555 !important;
  font-weight: 600 !important;
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.chapter-nav a:hover {
  color: #000000 !important;
  background-color: #f0f0f0;
}

.chapter-nav a.disabled {
  color: #ccc !important;
  pointer-events: none;
  cursor: default;
  background-color: transparent !important;
}

/* --- MÃ MỚI: CHỈNH FONT CHỮ CHO PHIÊN BẢN ĐIỆN THOẠI --- */
@media screen and (max-width: 768px) {
  .chapter-nav {
    max-width: 90%; /* Thu hẹp chiều rộng trên di động */
  }
  .chapter-nav a {
    font-size: 15px !important; /* Giảm kích thước chữ */
    padding: 8px 10px !important; /* Giảm khoảng đệm */
  }
}
/* --- CSS CHO POP-UP MỤC LỤC --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9998;
  display: none; /* Mặc định ẩn đi */
}

/* --- MÃ ĐÃ SỬA CHO POPUP MỤC LỤC --- */
.modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 25px 30px;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 9999;
  display: none;
  box-shadow: 0 5px 25px rgba(0,0,0,0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);

  /* --- Phần hiệu ứng nền bạch kim --- */
  background: linear-gradient(135deg,
      rgba(220, 220, 220, 0.9),  /* Xám bạc nhạt */
      rgba(245, 245, 245, 0.95), /* Trắng khói */
      rgba(229, 228, 226, 0.9),  /* Màu bạch kim */
      rgba(245, 245, 245, 0.95), /* Trắng khói */
      rgba(220, 220, 220, 0.9)); /* Xám bạc nhạt */
  background-size: 300% 300%;
  animation: metallic-shine 7s ease-in-out infinite;
}

.modal-content h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-family: 'Bodoni Moda', serif;
  font-size: 24px;
  text-align: center;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  color: #888;
}
.modal-close:hover {
  color: #000;
}

.modal-toc-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.modal-toc-list li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
.modal-toc-list li:last-child {
  border-bottom: none;
}
.modal-toc-list a {
  text-decoration: none;
  color: #6B0000 !important;
  display: block;
  transition: all 0.2s ease;
}
.modal-toc-list a:hover {
  color: #d10f0f !important; /* Đã đổi sang màu xanh rêu đậm */
  padding-left: 5px;
  font-weight: bold; /* Thêm chữ in đậm để nổi bật hơn */
}
/* --- TÙY CHỈNH FONT CHO POP-UP MỤC LỤC --- */

/* Đổi font cho tiêu đề "Mục lục" */
.modal-content h3 {
  font-family: 'Bodoni Moda', serif !important;
}

/* Đổi font cho danh sách các chương */
.modal-toc-list ul li a {
  font-family: 'Niramit', sans-serif !important;
  font-size: 16px; /* Tăng nhẹ kích thước chữ cho dễ đọc hơn */
}
/* --- CSS CHO POP-UP DANH SÁCH TRUYỆN --- */
.story-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9998;
  display: none;
  cursor: pointer;
}
/* --- MÃ ĐÃ SỬA CHO POPUP THỂ LOẠI --- */
.story-popup-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 25px 30px;
  border-radius: 10px;
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
  z-index: 9999;
  display: none;
  box-shadow: 0 5px 25px rgba(0,0,0,0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-family: 'Niramit', sans-serif;
  text-align: center; /* <<< THÊM DÒNG NÀY ĐỂ CANH GIỮA */

  /* --- Phần hiệu ứng nền bạch kim --- */
  background: linear-gradient(135deg,
      rgba(220, 220, 220, 0.9),
      rgba(245, 245, 245, 0.95),
      rgba(229, 228, 226, 0.9),
      rgba(245, 245, 245, 0.95),
      rgba(220, 220, 220, 0.9));
  background-size: 300% 300%;
  animation: metallic-shine 7s ease-in-out infinite;
}
.story-popup-content h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-family: 'Bodoni Moda', serif;
  font-size: 28px;
  text-align: center;
  color: #333;
}
.story-popup-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 32px;
  font-weight: bold;
  cursor: pointer;
  color: #aaa;
  line-height: 1;
  transition: color 0.2s ease;
}
.story-popup-close:hover {
  color: #000;
}
#popup-story-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#popup-story-list li {
  padding: 12px 5px;
  border-bottom: 1px solid #eee;
}
#popup-story-list li:last-child {
  border-bottom: none;
}
#popup-story-list a {
  text-decoration: none;
  color: #333 !important;
  font-size: 18px;
  display: block;
  transition: all 0.2s ease;
}
#popup-story-list a:hover {
  color: #000000 !important;
  padding-left: 10px;
}
#popup-story-list .loading-text,
#popup-story-list .no-stories-text {
  text-align: center;
  padding: 20px;
  font-size: 16px;
  color: #888;
}
.post-share {
    display: none !important;
}
/* --- MÃ CUỐI CÙNG: HIỆU ỨNG XANH CHO TIÊU ĐỀ POPUP --- */

/* Áp dụng tất cả style trực tiếp cho link "Mục lục" */
.modal-content h3 a {
    /* 1. Thuộc tính FONT và SHADOW bạn muốn */
    font-family: "Bungee Inline", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    transition: text-shadow 0.2s ease-in-out;

    /* 2. Hiệu ứng kim loại MÀU XANH */
    background: linear-gradient(to right, #6B0000, #FF7B7B, #E01111, #6B0000);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine-effect 3s linear infinite;
}

/* 3. Hiệu ứng hover chỉ đổi bóng đổ */
.modal-content h3 a:hover {
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6) !important;
}

/* 4. Giữ lại mã animation (nếu bạn đã xóa nó) */
@keyframes shine-effect {
  to {
    background-position: -200% center;
  }
}

/* --- TÙY CHỈNH FONT CHỮ CHO NỘI DUNG BÌNH LUẬN (PHIÊN BẢN SỬA LỖI) --- */

/* Áp dụng cho cả bình luận ngắn (không có thẻ p) và bình luận dài */
#comments .comment-content,
#comments .comment-body p {
    font-family: 'Niramit', serif !important;
    font-size: 18px !important; /* <-- BẠN CÓ THỂ THAY ĐỔI CỠ CHỮ Ở ĐÂY */
    line-height: 1.6 !important;
    word-break: break-word; /* Giúp tự động xuống dòng khi chữ quá dài */
}

/* Áp dụng cho màn hình nhỏ (di động, máy tính bảng) */
@media screen and (max-width: 768px) {
    #comments .comment-content,
    #comments .comment-body p {
        font-size: 15px !important; /* <-- BẠN CÓ THỂ THAY ĐỔI CỠ CHỮ CHO DI ĐỘNG Ở ĐÂY */
    }
}
/* --- SỬA FONT CHO NÚT "TRẢ LỜI" VÀ CÁC HÀNH ĐỘNG KHÁC --- */
#comments .comment-actions a,
#comments .comment-actions span {
    font-family: 'Niramit', serif !important;
    text-transform: none !important; /* Bỏ viết hoa chữ "TRẢ LỜI" */
    font-size: 15px !important;     /* Chỉnh lại cỡ chữ cho phù hợp */
    font-weight: 500 !important;
    color: #fca400 !important;
}
/* --- Khung ghi chú cho Editor (Đã sửa lỗi canh lề) --- */

/* 1. Kiểu dáng chung của cái khung */
.khung-ghi-chu {
  background-color: #F8F7F7;
  border: 1px solid #ddd;
  border-radius: 8px;
  width: 80%;
  padding: 15px 50px; /* Tạo khoảng đệm bên trong khung */
  margin: 20px auto;
  box-sizing: border-box;
}

/* 2. Ghi đè margin mặc định và căn đều cho các đoạn văn bên trong */
.khung-ghi-chu p {
  text-align: justify !important;
  margin-left: 0 !important; /* Bỏ khoảng lề trái mặc định */
  margin-right: 0 !important; /* Bỏ khoảng lề phải mặc định */
}

/* 3. Giữ cho tiêu đề "Editor" luôn ở giữa */
.khung-ghi-chu .tieu-de-editor {
  text-align: center !important;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 15px;
}
/* --- Hết phần Khung ghi chú --- */
/* --- Mã sửa lỗi khung ghi chú trên di động --- */
@media screen and (max-width: 768px) {
  .khung-ghi-chu {
    width: 95%; /* Nới rộng khung ra gần hết chiều ngang màn hình */
    padding: 15px 20px; /* Giảm khoảng đệm trái/phải để có thêm không gian cho chữ */
  }
}
/* --- BẮT ĐẦU MÃ HIỆU ỨNG LOÉ SÁNG KIM LOẠI (ĐÃ SỬA LỖI) --- */
.color-change-effect {
  /* Tùy chỉnh font chữ */
  font-weight: bold;
  font-size: 110%;

  /* Tạo màu nền kim loại dạng gradient */
  background: linear-gradient(to right, #f0c34d, #d8a011, #b6860a, #d8a011, #f0c34d);

  /* Kích thước nền lớn hơn để có không gian cho hiệu ứng chạy */
  background-size: 200% auto;

  /* Cốt lõi: Làm chữ trong suốt để nền hiện ra theo hình dạng chữ */
  color: transparent;
  -webkit-text-fill-color: transparent; /* Dành cho trình duyệt Webkit (Chrome, Safari) */
  -webkit-background-clip: text;
  background-clip: text;

  /* Áp dụng hiệu ứng động có tên là 'shine-effect' */
  animation: shine-effect 3s linear infinite;
}

/* Định nghĩa các bước của hiệu ứng động 'shine-effect' */
@keyframes shine-effect {
  to {
    /* Di chuyển vị trí của nền để tạo cảm giác loé sáng */
    background-position: -200% center;
  }
}
/* --- KẾT THÚC MÃ HIỆU ỨNG --- */
/* --- Keyframes cho hiệu ứng nền kim loại --- */
@keyframes metallic-shine {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* --- TÙY CHỈNH HIỆU ỨNG CHO CÁC TIÊU ĐỀ POPUP --- */

/* --- 1. Tiêu đề "MỤC LỤC" (Giữ nguyên màu đỏ) --- */
.modal-content h3 a {
  font-family: "Bungee Inline", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  transition: opacity 0.3s ease;
  display: inline-block;

  background: linear-gradient(to right, #6B0000, #FF7B7B, #E01111, #6B0000);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine-effect 3s linear infinite;
  text-shadow: none !important;
}

.modal-content h3 a:hover {
  text-shadow: none !important;
  opacity: 0.8;
}


/* --- 2. Tiêu đề "THỂ LOẠI" (Màu xanh đen mới) --- */
.story-popup-content h3 {
  font-family: "Bungee Inline", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  transition: opacity 0.3s ease;
  display: inline-block;

  /* Màu gradient XANH ĐEN mới của bạn */
  background: linear-gradient(to right, #3A3A3A, #B0B0B0, #888888, #3A3A3A);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine-effect 4s linear infinite; /* Chỉnh tốc độ animation một chút cho khác biệt */
  text-shadow: none !important;
}

.story-popup-content h3:hover {
  text-shadow: none !important;
  opacity: 0.8;
}
/* --- BẮT ĐẦU MÃ LÀM ĐẸP KHUNG BÌNH LUẬN --- */

/* 1. Tạo khung bao quanh cho mỗi bình luận */
.comments .comment {
    background-color: #f9f9f9;  /* Màu nền hơi xám nhẹ */
    border: 1px solid #e0e0e0;     /* Đường viền mỏng */
    border-radius: 8px;           /* Bo góc cho mềm mại */
    padding: 15px 20px;           /* Khoảng đệm bên trong */
    margin-bottom: 20px !important; /* Khoảng cách giữa các bình luận */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Bóng đổ nhẹ tạo chiều sâu */
}

/* 2. Tên người bình luận */
.comments .comments-content .user a {
    font-family: 'Oswald', sans-serif !important; /* Dùng font khác để tạo điểm nhấn */
    font-weight: 600 !important;
    color: #2c3e50 !important; /* Màu xanh đen */
    font-size: 16px !important;
}

/* 3. Ngày giờ bình luận */
.comments .comments-content .datetime a {
    font-size: 13px !important;
    color: #7f8c8d !important; /* Màu xám */
    font-style: italic;
    text-transform: none !important; /* Bỏ viết hoa */
}

/* 4. Nội dung bình luận - Quan trọng nhất để sửa lỗi font */
#comments .comment-content,
#comments .comment-body p {
    font-family: 'Niramit', serif !important; /* Áp dụng font Niramit hỗ trợ tiếng Việt */
    font-size: 18px !important;
    line-height: 1.7 !important; /* Giãn dòng cho dễ đọc */
    color: #34495e !important; /* Màu chữ chính */
    margin-top: 10px !important;
    word-break: break-word; /* Tự động xuống dòng khi chữ quá dài */
}

/* 5. Các nút hành động (Trả lời, Xóa) */
.comments .comment-actions a {
    font-family: 'Niramit', serif !important;
    text-transform: none !important; /* Bỏ viết hoa chữ "TRẢ LỜI" */
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #3498db !important; /* Màu xanh dương cho liên kết */
    margin-top: 15px;
    display: inline-block;
    transition: color 0.2s; /* Hiệu ứng khi di chuột */
}

.comments .comment-actions a:hover {
    color: #2980b9 !important; /* Đổi màu khi di chuột vào */
    text-decoration: underline;
}

/* --- KẾT THÚC MÃ LÀM ĐẸP KHUNG BÌNH LUẬN --- */
/* --- BẮT ĐẦU: Khung ghi chú cho Tác giả --- */
.khung-tac-gia {
  background-color: #fdf5e6; /* Màu nền be (Old Lace) */
  border-left: 5px solid #a0522d; /* Đường viền trái màu nâu (Sienna) */
  border-radius: 0 8px 8px 0; /* Bo góc ở bên phải cho mềm mại */
  width: 80%;
  padding: 15px 20px 15px 25px; /* Khoảng đệm bên trong */
  margin: 25px auto; /* Khoảng cách trên dưới với nội dung chính */
  box-sizing: border-box;
  color: #444; /* Màu chữ tối hơn một chút */
  box-shadow: 2px 2px 5px rgba(0,0,0,0.05); /* Thêm bóng đổ nhẹ */
}

/* Ghi đè các định dạng mặc định cho đoạn văn bên trong khung */
.khung-tac-gia p {
  text-align: justify !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  line-height: 1.7 !important; /* Giãn dòng cho dễ đọc */
}

/* Định dạng cho tiêu đề "Lời tác giả" */
.khung-tac-gia .tieu-de-tac-gia {
  text-align: left !important; /* Canh trái tiêu đề */
  font-weight: bold;
  font-style: normal; /* Tiêu đề không bị in nghiêng */
  font-family: 'Bodoni Moda', serif; /* Dùng font khác cho tiêu đề */
  font-size: 110%;
  margin-top: 0;
  margin-bottom: 10px;
  color: #a0522d; /* Màu tiêu đề trùng màu viền */
}

/* Tùy chỉnh cho màn hình di động */
@media screen and (max-width: 768px) {
  .khung-tac-gia {
    width: 95%;
    padding: 15px 15px 15px 20px;
  }
}
/* --- KẾT THÚC: Khung ghi chú cho Tác giả --- */
/* --- CODE SỬA MÀU LINK CHO TRANG MỤC LỤC (Bản sửa lỗi) --- */

/* 1. MÀU MẶC ĐỊNH (cho link ĐÃ UPDATE) - Vàng */
/* Dùng selector cụ thể hơn để tăng độ ưu tiên */
#chapter-list-container table tbody tr td a {
  color: #b39e49 !important; /* Vàng */
  text-decoration: none !important; /* Bỏ gạch chân nếu có */
  pointer-events: auto !important; /* Đảm bảo link này bấm được */
  cursor: pointer !important; /* Con trỏ hình bàn tay */
}

/* 2. MÀU KHI HOVER (cho link ĐÃ UPDATE) - Hồng nhạt */
#chapter-list-container table tbody tr td a:hover {
  color: #d499c8 !important; /* Hồng nhạt */
}

/* 3. MÀU VÀ TRẠNG THÁI (cho link CHƯA UPDATE) - Xám, không bấm được */
/* Quy tắc này phải đặt SAU quy tắc màu vàng để ghi đè */
#chapter-list-container table tbody tr td a[href^="LINK-CHƯƠNG"] {
  color: #999999 !important; /* Xám mờ */
  pointer-events: none !important; /* Vô hiệu hóa click */
  cursor: default !important; /* Con trỏ chuột mặc định */
}

/* 4. CSS CHO DI ĐỘNG (Giữ nguyên cấu trúc nhưng đảm bảo không ghi đè màu sai) */
@media screen and (max-width: 500px) {
  #chapter-list-container table {
    width: 100% !important;
    border-spacing: 4px 4px;
    border-collapse: separate;
  }
  #chapter-list-container tr { /* Áp dụng flex cho tr như cũ */
    display: flex;
  }
  #chapter-list-container td { /* Áp dụng flex cho td như cũ */
    flex: 1;
    border: 1px solid #ddd !important;
    padding: 0 !important;
    text-align: center;
  }
  /* Chỉ định dạng layout cho 'a' trong mobile, màu sắc sẽ lấy từ quy tắc bên ngoài */
  #chapter-list-container td a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    font-size: 14px !important;
    /* Không cần đặt color hay pointer-events ở đây nữa */
  }
}
/* --- KẾT THÚC CODE SỬA MÀU LINK --- */
/* --- BẮT ĐẦU CSS CHO LAYOUT THẺ TRANG CHỦ --- */

/* 1. Container cho toàn bộ lưới bài đăng */
.post-grid-container {
  display: flex; /* Dùng Flexbox để chia cột */
  flex-wrap: wrap; /* Cho phép các thẻ rớt hàng */
  justify-content: space-between; /* Tạo khoảng cách đều giữa 2 thẻ */
  width: 100%;
  margin: 0 auto;
}

/* 2. Style cho từng thẻ (card) */
.post-card {
  width: 48.5%; /* Mỗi thẻ chiếm gần 50% để có khoảng hở ở giữa */
  margin-bottom: 30px; /* Khoảng cách giữa các hàng */
  background: #f9f9f9; /* Màu nền trắng cho thẻ */
  border: 1px solid #eee; /* Viền mỏng */
  border-radius: 12px; /* << YÊU CẦU GÓC BO TRÒN >> */
  box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Đổ bóng nhẹ */
  overflow: hidden; /* Bắt buộc để bo góc cả hình ảnh bên trong */
  display: flex; /* Giúp thẻ co giãn theo nội dung */
  flex-direction: column; /* Xếp hình ảnh bên trên, nội dung bên dưới */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hiệu ứng khi di chuột vào thẻ */
.post-card:hover {
  transform: translateY(-5px); /* Nhấc thẻ lên một chút */
  box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

/* 3. Style cho hình ảnh của thẻ */
/* Ghi đè style .post-thumb cũ (500px) bằng tỉ lệ 16:9 */
.post-card .postthumb .post-thumb {
  width: 100%;
  padding-bottom: 56.25% !important; /* Tỉ lệ 16:9 */
  height: 0; /* Cần thiết khi dùng padding-bottom % */
  background-size: cover;
  background-position: center;
}

/* 4. Style cho nội dung bên dưới ảnh */
.card-content {
  padding: 20px 25px 25px 25px; /* Khoảng đệm cho nội dung */
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Giúp các thẻ trên cùng 1 hàng cao bằng nhau */
}

/* 5. Tùy chỉnh các thành phần bên trong thẻ */
.card-content .home-date {
  font-size: 11px; /* Cho ngày tháng nhỏ lại */
}

.card-content .home-title {
  font-size: 24px; /* Có thể chỉnh cỡ chữ tiêu đề ở đây */
  letter-spacing: -0.5px;
}

.card-content .home-summary {
  font-family: 'Karla', sans-serif; /* Dùng font dễ đọc hơn cho trích đoạn */
  font-size: 15px;
  color: #555;
  line-height: 1.6;
  flex-grow: 1; /* Đẩy nút "Xem tiếp" xuống dưới cùng */
  margin-top: 15px;
  margin-bottom: 25px; /* Khoảng cách trước nút */
}

.card-content .home-button {
  margin-top: auto; /* Đảm bảo nút "Xem tiếp" luôn ở cuối thẻ */
  text-align: left; /* Bỏ căn giữa của style gốc */
}

/* 6. Responsive: Hiển thị 1 cột trên di động (ví dụ: dưới 768px) */
@media screen and (max-width: 768px) {
  .post-card {
    width: 100%; /* Mỗi thẻ chiếm 100% chiều rộng */
    margin-bottom: 25px;
  }
}

/* --- KẾT THÚC CSS CHO LAYOUT THẺ --- */
/* --- SỬA LỖI CHIỀU CAO KHUNG BÌNH LUẬN CUSDIS --- */
#cusdis_thread iframe {
  width: 100% !important;
  min-height: 350px !important; /* Đặt chiều cao tối thiểu cho khung */
}