@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Quicksand:wght@300..700&display=swap');body{font-family:"Quicksand",sans-serif;margin:0;font-size:15px;font-weight:500}
.container{max-width:1000px}
a{text-decoration:none;color:#333}
header{display:flex;align-items:center;position:relative;z-index:1}
section#menu{background:#fff;position:sticky;top:0;z-index:999;transition:all .15s ease;box-shadow:0 2px 5px rgba(0,0,0,0.1)}
header .logo{/*margin:0;text-align:center;*/
    flex-grow:1}
.logo img{width:auto;height:45px}
#menu-toggle{background-color:transparent;color:#333;border:none;font-size:1.5em;cursor:pointer;padding:0.5em 0}
#menu-toggle i{font-size:26px;margin:0 10px}
#offcanvas-menu{position:fixed;top:0;left:-300px;width:300px;height:100%;background-color:#f0f0f0;overflow-y:auto;transition:left 0.3s ease;z-index:1001;/* Đảm bảo menu nằm trên tất cả */}
#offcanvas-menu.open{left:0}
.menu-header{padding:15px;text-align:right;background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);background-size:400% 400%;animation:gradient 15s ease infinite;color:white}
#menu-close{background-color:transparent;border:none;font-size:1.2em;cursor:pointer;padding:0;color:#fff;font-weight:700}
#offcanvas-menu nav ul{list-style:none;padding:0;margin:0}
#offcanvas-menu nav ul li{border-bottom:1px solid #ddd}
#offcanvas-menu nav ul li:last-of-type{border-bottom:none!important}
#offcanvas-menu nav ul li a{display:block;padding:10px;text-decoration:none;color:#333}
#offcanvas-menu nav ul li a:hover{background-color:#ddd}
#offcanvas-menu nav ul li ul{display:none;background-color:#eee;padding-left:20px}
#offcanvas-menu nav ul li.active > ul{display:block}
#offcanvas-menu nav ul li a i{float:right;transition:transform 0.3s ease;margin-top:5px}
#offcanvas-menu nav ul li.active > a i{transform:rotate(180deg)}
/*---------------------MODAL--------------------------*/
.modal{display:none;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.modal-content{background-color:#fefefe;margin:15% auto;padding:20px;border:1px solid #888;width:300px}
.close{color:#aaa;float:right;font-size:28px;font-weight:bold}
.close:hover,.close:focus{color:black;text-decoration:none;cursor:pointer}
form{display:flex;flex-direction:column}
label{margin:5px 0}
input{margin-bottom:10px;padding:8px;border:1px solid #ccc;border-radius:4px}
button.submit{padding:5px 10px;background-color:#00182f;color:white;border:none;border-radius:999px;cursor:pointer}
button#openModal{padding:0;background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);background-size:400% 400%;animation:gradient 15s ease infinite;color:white;border:none;border-radius:999px;cursor:pointer;width:30px;height:30px;display:inline-flex;justify-content:center;align-items:center}
button#openModal:hover{background-color:#4cae4c}
button.close{padding:0 10px;border:1px solid #8e8e8e4f;border-radius:5px}
form#loginForm>div{display:flex;gap:10px;align-items:center;margin-top:10px}
/*---------------------------SEARCH----------------------------*/
.search-container{position:relative;display:inline-block}
.search-icon{font-size:24px;cursor:pointer;background:none;border:none}
.search-form{display:none;position:absolute;top:60px;right:0;width:320px;background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab);background-size:400% 400%;animation:gradient 15s ease infinite;border:1px solid #ccc;padding:10px 0 1px 15px;box-shadow:0 2px 10px rgba(0,0,0,0.1);border-radius:10px}
@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.search-form input{padding:5px;margin-right:5px;width:195px}
.search-form button{padding:5px 10px}
button#search-icon i{font-size:18px;padding:15px}
form#search-form button{background:#00182f;color:#fff;border:none;border-radius:5px}
.visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;/* Tùy chọn */}
.login{padding:0 0 0 5px}
/*---------------------------MAIN---------------------------------*/
.row.row-cols-2.row-cols-sm-3.row-cols-md-4.row-cols-lg-5.row-cols-xl-5.main{--bs-gutter-x:1rem}
section#top-hot{padding-top:30px}
.thumbnail-top-hot.box a img{width:100%;height:295px;object-fit:cover}
.thumbnail-top-hot a img{width:100%;height:230px;object-fit:cover}
.col-post{box-shadow:0 2px 6px 0 rgb(218 218 253 / 65%),0 2px 6px 0 rgb(206 206 238 / 54%);border-radius:10px;overflow:hidden;transition:all ease 0.3s;margin-bottom:30px}
.info-top-hot{padding:12px;text-align:center}
.info-top-hot ul li{font-size:13px;padding:2px}
.info-top-hot a h3{-webkit-line-clamp:1;text-overflow:ellipsis;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;font-size:15px;margin-bottom:5px;font-weight:600}
/* --- KIỂU 4:ĐƯỜNG KẺ HAI BÊN --- */
.title-box-all-post{/* Cần tác động vào thẻ cha để căn giữa */
    text-align:center;margin-bottom:30px}
.title-box-all-post h2{font-size:22px;text-transform:uppercase;font-weight:700;color:#333;display:inline-flex;/* Sử dụng flexbox để căn chỉnh */
    align-items:center;width:100%}
/* Tạo đường kẻ bên trái */
.title-box-all-post h2::before{content:'';flex:1;height:1px;background-color:#ccc;margin-right:20px}
/* Tạo đường kẻ bên phải */
.title-box-all-post h2::after{content:'';flex:1;height:1px;background-color:#ccc;margin-left:20px}
.thumbnail-single img{width:100%;height:290px;object-fit:cover;border-radius:5px;box-shadow:rgba(0,0,0,0.24) 0 3px 8px}
.title-single h1{font-size:20px;text-transform:uppercase;margin-bottom:20px}
.info-main-sing h2{font-size:18px;text-transform:uppercase;padding-top:20px}
.info-main-sing ul{position:relative;list-style:none;padding:0;margin:0;width:100%;margin-bottom:20px}
.info-main-sing ul li{display:flex;align-items:center;padding:5px 0 10px 0;border-bottom:1px solid #dddddd}
.info-main-sing ul li span{font-weight:bold;right:0;position:absolute}
.info-main-sing ul li i{padding-right:5px}
.info-main-sing ul.float-align{list-style:none;padding:0;margin:0}
.info-main-sing ul.float-align li{overflow:hidden;padding:2px 0}
.info-main-sing ul.float-align li span{float:right;font-weight:bold}
.info-main-sing h3{margin:15px auto;font-size:16px;text-transform:uppercase;line-height:1.5rem;padding-left:10px;border-left:5px solid #E91E63;/* Retain original color */
    background:linear-gradient(to right,rgba(233,30,99,0.1),transparent);/* Subtle background gradient */
    transition:border-color 0.3s ease;/* Smooth transition for hover effect */}
/* Hover effect for interactivity */
.info-main-sing h3:hover{border-left-color:#C2185B;/* Slightly darker shade for hover */}
/* Alternative Option 1:Gradient Border */
.info-main-sing h3.gradient-border{border-left:5px solid transparent;border-image:linear-gradient(to bottom,#E91E63,#F06292) 1}
/* Alternative Option 2:Double Border */
.info-main-sing h3.double-border{border-left:3px double #E91E63;border-left-width:5px;/* Maintain consistent width */}
/* Alternative Option 3:Animated Border */
.info-main-sing h3.animated-border{border-left:5px solid #E91E63;position:relative}
.info-main-sing h3.animated-border::before{content:'';position:absolute;left:-5px;top:0;height:100%;width:5px;background:linear-gradient(to bottom,transparent,#E91E63,transparent);animation:borderGlow 2s ease-in-out infinite}
@keyframes borderGlow{0%,100%{opacity:0.6}50%{opacity:1}}
.paginate_links{overflow:hidden;text-align:center;display:table;margin:10px auto}
.paginate_links .page-numbers{width:32px;height:32px;display:inline-block;float:left;margin:0 5px;padding-top:5px;color:#22223b;border:1px solid #22223b;margin-bottom:5px;font-weight:700;border-radius:999px}
.paginate_links .page-numbers:hover{background:#22223b;color:#fff}
.paginate_links .page-numbers.prev,.paginate_links .page-numbers.next{background:transparent;width:auto;border:none}
.paginate_links .page-numbers.prev:hover,.paginate_links .page-numbers.next:hover{text-decoration:underline;color:#22223b}
.paginate_links .page-numbers.current{background:#22223b;color:#fff}
div#category-title h1,.title-search h1{font-size:20px;text-transform:uppercase}
.title-page h1{font-size:30px;text-transform:uppercase}
h4.tl-lq{margin-bottom:20px;border-top:1px solid #33333336;padding-top:10px}
.page-er h1{text-align:center;margin:20px auto;font-size:3em;font-weight:bold;text-transform:uppercase;background:linear-gradient(to right,#f37731,#03a9f4,#f69d3c,#3f87a6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;background-size:200% auto;animation:animatedGradient 5s linear infinite}
@keyframes animatedGradient{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.btn-er button{/* Kiểu dáng cơ bản cho nút */
  background-color:transparent;/* Loại bỏ màu nền mặc định */
  border:2px solid transparent;/* Đường viền trong suốt */
  padding:5px 15px;font-size:1.2em;font-weight:bold;text-transform:uppercase;cursor:pointer;outline:none;position:relative;/* Cần thiết cho::before */
  overflow:hidden;/* Để ẩn gradient tràn ra ngoài */
  border-radius:5px;/* Bo góc */
  color:#fff;/* Màu chữ trắng */
  transition:color 0.3s ease;/* Hiệu ứng chuyển màu chữ */}
.btn-er button::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to right,#ff4e50,#f9d423);/* Gradient đẹp */
  z-index:-1;/* Đặt gradient phía sau nút */
  transition:transform 0.3s ease;/* Hiệu ứng chuyển động gradient */
  transform:scaleX(0);/* Ẩn gradient ban đầu */
  transform-origin:left;/* Bắt đầu chuyển động từ bên trái */}
.btn-er button:hover{color:#000;/* Đổi màu chữ khi hover */}
.btn-er button:hover::before{transform:scaleX(1);/* Hiển thị gradient khi hover */}
.btn-er button a{color:#198754;/* Kế thừa màu từ button */
  text-decoration:none;/* Loại bỏ gạch chân */
  display:block;/* Làm cho link chiếm toàn bộ nút */
  width:100%;height:100%}
/* Animation Gradient (Tùy chọn,nếu muốn gradient liên tục chuyển động) */
.btn-er button{background-size:200% auto;background-image:linear-gradient(to right,#2980b9,#6dd5fa,#fff600,#ff7300,#2980b9);/* Thêm nhiều màu */
  animation:animatedGradient 5s linear infinite}
@keyframes animatedGradient{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.page-er{background-image:url(../img/bg-er.jpg);background-size:cover;background-repeat:no-repeat;padding:20px;margin-bottom:20px;margin-top:20px;border-radius:5px}
.read-more-btn,.read-less-btn{background-color:#0073aa;color:#fff;border:none;padding:2px 7px;cursor:pointer;border-radius:5px}
.read-more-btn:hover,.read-less-btn:hover{background-color:#005177}
.entry-content{margin-bottom:20px}
.content-excerpt p,.content-full p{margin-bottom:15px}
.thumbnail-top-hot.single a img{width:100%;height:275px}
span.status a{background-color:#dbdbdb87;padding:2px 5px;border-radius:5px;margin-top:5px;display:block;color:#22223b;font-weight:700;font-size:12px}
.category-list-container{position:relative;padding:10px 0}
.category-list-title{font-size:22px;color:#222}
.category-list-horizontal ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;overflow-x:auto;gap:12px;padding-bottom:10px}
.category-list-horizontal ul li a{display:block;padding:8px 20px;background-color:#f0f0f0;color:#333;text-decoration:none;font-size:14px;font-weight:600;border-radius:5px;white-space:nowrap;transition:all 0.2s ease-in-out}
.category-list-horizontal ul li a:hover{background-color:#0073aa;color:#fff;transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,0.15)}
.category-list-horizontal ul::-webkit-scrollbar{height:5px}
.category-list-horizontal ul::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}
.category-list-horizontal ul::-webkit-scrollbar-thumb{background:#ccc;border-radius:10px}
.category-list-horizontal ul::-webkit-scrollbar-thumb:hover{background:#aaa}
.category-list-container::after{content:'';position:absolute;right:0;top:0;bottom:0;width:60px;background:linear-gradient(to left,white,rgba(255,255,255,0));pointer-events:none}
.category-list-container:not(:has(.category-list-title))::after{top:10px}
.thumbnail-top-hot{position:relative}
.thumbnail-top-hot span{position:absolute;top:0;left:0;color:#ffffff;font-weight:bold;background-color:#BF134B;padding:4px 10px 5px 10px;border-bottom-right-radius:10px}
span.hot-label{font-size:12px}
.info-main-sing p{text-align:justify}
.video-item h3{display:none}
.video-item iframe{width:100%;height:350px}
.danh-sach-giong-doc{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:20px 0;gap:10px;justify-content:center}
.danh-sach-giong-doc li a{display:block;padding:5px 10px;background-color:#f0f0f0;color:#333;text-decoration:none;border-radius:20px;font-size:13px;font-weight:600;transition:all 0.2s ease-in-out;border:1px solid #ddd}
.danh-sach-giong-doc li a:hover{background-color:#0073aa;color:#fff;border-color:#005f8c;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.1)}
.swiper.top-hot-slider.swiper-initialized.swiper-horizontal.swiper-backface-hidden{padding:10px;background:#f2f2f2;border-radius:4px}
/*---------------------------BREAKCRUM------------------------------*/
.breadcrumb{margin:20px 0;font-size:14px}
.breadcrumb ol{list-style:none;padding:0;display:flex;margin-bottom:0}
.breadcrumb li{margin-right:10px}
.breadcrumb li:not(:last-child):after{content:">";margin-left:10px}
.breadcrumb a{text-decoration:none;color:#0073aa}
.breadcrumb a:hover{text-decoration:underline}
.pagination-hs{display:flex;align-items:center;gap:5px;justify-content:center}
.pagination-hs a,.pagination-hs span{display:inline-block;padding:8px 12px;text-decoration:none;color:#333;background-color:#f1f1f1;border-radius:3px;font-size:14px;transition:background-color 0.3s}
.pagination-hs a:hover,.pagination-hs a:focus{background-color:#ddd}
.pagination-hs .current{background-color:#1da1f2;/* Màu xanh tương tự Twitter */
    color:#fff;font-weight:bold}
.pagination-hs .next{background-color:#1da1f2;/* Màu xanh cho nút "Tiếp" */
    color:#fff;padding:8px 15px}
.pagination-hs .next:hover,.pagination-hs .next:focus{background-color:#1a91da;/* Màu xanh đậm hơn khi hover */}
span.categories {
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

header#category-title {
    display: block;
}
/*---------------------------YOUTUBE PLAYLIST----------------------------------*/
.my-youtube-playlist-container{display:flex;flex-wrap:wrap;
	gap:20px;margin:1em 0;max-width:1000px;width:100%}
.main-video-wrapper{flex:1;
	min-width:320px;
	aspect-ratio:16 / 9;}
.main-video-wrapper iframe{width:100%;height:100%;border:none}
.video-list-wrapper{width:100%;
	max-height:500px;
	overflow-y:auto;flex-basis:300px;
	flex-grow:0;flex-shrink:0;border:1px solid #ddd;padding:5px}
.playlist-item{display:flex;align-items:center;gap:15px;padding:10px;cursor:pointer;transition:background-color 0.3s;border-bottom:1px solid #eee}
.playlist-item:hover{background-color:#f5f5f5}
.playlist-item.active{background-color:#e0eafc;
	font-weight:bold}
.playlist-thumbnail{width:100px;height:auto;object-fit:cover;flex-shrink:0}
.playlist-item-title{font-size:14px;line-height:1.4}
div#video-list {
    height: 100%;
    max-height: 235px;
    overflow: auto;
}
@media (max-width:768px){.my-youtube-playlist-container{flex-direction:column;}.video-list-wrapper{max-height:300px;flex-basis:auto;}
/*---------------------------MOBILE---------------------------------*/
@media only screen and (min-width:991px){h2.section-title{font-size:1.8rem}.col-post:hover{-webkit-box-shadow:0 .5rem 1rem 0 rgba(0,0,0,.3);box-shadow:0 .5rem 1rem 0 rgba(0,0,0,.3)}}
@media only screen and (max-width:768px){.login span{display:none}}
@media only screen and (max-width:600px){.page-head-main p{display:none}}
@media only screen and (max-width:430px){.logo img{width:auto;height:35px}.main-head{height:185px}.thumbnail-top-hot a img{width:100%;height:200px;object-fit:cover}.thumbnail-top-hot.box a img{width:100%;height:220px;object-fit:cover}.thumbnail-top-hot.single a img{width:100%;height:210px}}
@media only screen and (max-width:390px){.search-form{right:-28px}.page-head-main{padding:30px}h2.section-title{font-size:1.3rem}}