/***********FONT CHỮ************/
@font-face {
font-family: 'Asap';
font-style: normal;
src: local('Asap'), url('../fonts/Asap/Asap-VariableFont_wdth,wght.ttf') format('truetype');
}
@font-face {
font-family: 'Playfair Display';
font-style: normal;
/* src: local('Playfair Display'), url('/assets/fonts/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf') format('truetype'); */
src: local('Playfair Display'), url('../fonts/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
}
html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
@media (min-width: 576px) {
.navbar-expand-sm .navbar-nav {
flex-direction: row;
justify-content: flex-end;
}
.navbar-expand-sm .navbar-nav .nav-link {
padding-right: 0;
padding-left: 0;
}
.navbar-expand-sm .navbar-nav .nav-item:not(:last-child) {
margin-right: 24px;
}
.navbar-nav .nav-link {
text-align: center;
}
}
img {
max-width: 100%;
height: auto;
}
ul, li, ol {
margin: 0;
padding: 0;
list-style: none;
}
header {
position: sticky;
top: 0;
z-index: 9;
}
/* HTML: */
.loader {
width: 50px;
aspect-ratio: 1;
display: grid;
border: 4px solid #0000;
border-radius: 50%;
border-right-color: #25b09b;
animation: l15 1s infinite linear;
position: absolute;
left: 40%;
}
.loader::before,
.loader::after {
content: "";
grid-area: 1/1;
margin: 2px;
border: inherit;
border-radius: 50%;
animation: l15 2s infinite;
}
.loader::after {
margin: 8px;
animation-duration: 3s;
}
@keyframes l15{
100%{transform: rotate(1turn)}
}
.svg_icon {
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
background-position: 0 0;
background-size: contain;
padding: 0;
font-size: 1.5rem;
text-align: center;
line-height: 24px;
flex-shrink: 0;
border: none;
background-color: transparent;
background-repeat: no-repeat;
outline: none !important;
}
.svg_icon.svg_search {
width: 32px;
height: 32px;
background-image: url('data:image/svg+xml,');
}
.svg_icon.svg_point {
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml,');
}
.svg_icon.svg_phone {
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml,');
}
.svg_icon.svg_mail {
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml,');
}
.svg_icon.svg_green_mail {background-image: url('data:image/svg+xml,');}
.svg_icon.svg_green_facebook {
width: 36px;
height: 36px;
/*background-image: url('data:image/svg+xml,');*/
background-image: url('data:image/svg+xml,');
}
.svg_icon.svg_green_youtube {
width: 36px;
height: 36px;
background-image: url('data:image/svg+xml,');
}
.svg_icon.svg_green_x {
width: 36px;
height: 36px;
background-image: url('data:image/svg+xml,');
}
.svg_icon.svg_location {
background-image: url('data:image/svg+xml,');
}
.svg_icon.svg_location_vr360 {
background-image: url('../img/icon-vr360.svg');
}
.svg_icon.svg_website {
background-image: url('../img/icon-website.svg');
}
.svg_icon.svg_mail {
background-image: url('../img/icon-mail.svg');
}
.svg_icon.svg_phone_black {background-image: url('data:image/svg+xml,');}
.svg_icon.svg_map {
background-image: url('data:image/svg+xml,');
filter: var(--special-filter-1)
}
.svg_icon.svg_grid_view {background-image: url('data:image/svg+xml,');}
.svg_icon.svg_map_location {background-image: url('data:image/svg+xml,');}
.svg_icon.svg_vr360 {background-image: url('data:image/svg+xml,');}
.svg_icon.svg_category {background-image: url('data:image/svg+xml,');}
.svg_icon.svg_user {background-image: url('data:image/svg+xml,');}
.svg_icon.svg_source {background-image: url('data:image/svg+xml,');}
a,
a:hover {
text-decoration: none;
}
.ChiTietTinBai.TinBai_BaiViet_DLNN .TinBai_GioiThieu .summary-information .text-blue {
color: #258cfb !important;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
html {
position: relative;
min-height: 100%;
}
body {
/* margin-bottom: 60px;*/
font-family: 'Asap', sans-serif;
font-weight: 400;
font-size: 1rem;
line-height: 1.5;
letter-spacing: 0.5px;
background-color: #FFFAF4;
}
.navbar-brand {
padding-top: 0;
padding-bottom: 0;
min-width: 115px;
}
header .navbar {
background-color: #FFFAF4 !important;
}
header .navbar-light .navbar-nav .nav-link {
font-family: 'Asap', sans-serif;
font-weight: 600;
font-size: 1rem;
line-height: 1.5;
color: #0F172B;
text-transform: uppercase;
letter-spacing: 0.15px;
}
.navbar-nav > .nav-item {
display: flex;
align-items: center;
}
footer {
padding: 40px 0;
background-image: url('../img/footer.png');
color: #FFFFFF;
}
footer div,
footer a,
footer span,
footer p {
color: #FFFFFF;
margin-bottom: 0;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
color: #FFFFFF;
}
.footer-center {
display: flex;
flex-direction: column;
gap: 16px;
}
.footer-center .footer-center-title {
font-family: 'Asap', sans-serif;
font-weight: 600;
font-size: 1.25rem;
line-height: 1.4;
text-transform: uppercase;
}
.footer-center .contact-location {
margin-bottom: 4px;
position: relative;
padding-left: 28px;
}
.footer-center .contact-location:before,
.contact-wrapper span:before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-image: url('../img/location-icon.png');
background-size: contain;
background-repeat: no-repeat;
}
.contact-wrapper span {
display: inline-block;
position: relative;
padding-left: 28px;
}
.contact-wrapper span:first-child {
padding-right: 24px;
border-right: 1px solid #FFFFFF;
}
.contact-wrapper span:first-child:before {
background-image: url('../img/phone-icon.png');
}
.contact-wrapper span:last-child {
margin-left: 24px;
}
.contact-wrapper span:last-child:before {
background-image: url('../img/mail-icon.png');
}
.copyright {
font-size: 0.875rem;
}
.static-direct {
display: flex;
flex-direction: column;
margin-bottom: 16px;
gap: 8px;
}
.static-direct div {
display: flex;
justify-content: space-between;
gap: 8px;
align-items: center;
}
.static-direct div span {
display: inline-block;
font-size: 0.875rem;
}
.static-direct div span:last-child {
font-weight: 600;
font-size: 1.25rem;
}
.social-icon-wrapper {
display: flex;
gap: 16px;
justify-content: flex-end;
}
.banner .owl-carousel .owl-item img {
/*aspect-ratio: 2.22;*/
position: relative;
object-fit: cover;
height: calc(100vh - 70px);
}
.banner .owl-carousel .owl-item .item-image-wrapper {
position: relative;
}
.banner .owl-carousel .owl-item .item-image-wrapper::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 50.04%, rgba(0, 0, 0, 0.8) 100%);
z-index: 1;
}
.banner .owl-carousel .owl-item .item,
.banner .owl-carousel .owl-item .container {
position: relative;
}
.banner .owl-carousel .owl-item .image-description {
position: absolute;
top: -330px;
color: #FFFFFF;
z-index: 2;
}
.banner .owl-carousel .owl-item .image-description span {
display: block;
}
.banner .owl-carousel .owl-item .image-description span.image-description-title {
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 2.8125rem;
line-height: 1.3;
margin-bottom: 16px;
}
.banner .owl-carousel .owl-item .image-description span.image-description-subtitle {
font-family: 'Asap', sans-serif;
font-weight: 600;
font-size: 1.25rem;
line-height: 1.4;
max-width: 700px;
}
.navbar-nav .nav-item #search {
display: flex;
width: 250px;
padding: 8px 16px;
align-items: center;
gap: 8px;
border-radius: 999px;
border: 1px solid var(--Border-border-primary, #CAD5E2);
background-position: calc(100% - 16px) 50%;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,');
}
.section-diemDuLich {
padding: 80px 0;
}
.section-banDoSo {
padding: 0;
background-color: #fff;
}
.section-tinTuc {
padding: 60px 0 80px;
}
.section-title {
margin: 0 auto;
text-align: center;
margin-bottom: 40px;
}
.section-title.section-title-left {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.section-title p {
margin-bottom: 0;
}
.section-title .title {
font-family: 'Playfair Display', serif;
font-weight: 700;
font-size: 2.25rem;
line-height: 1.3;
margin-bottom: 8px;
color: #00A63E;
}
.section-title.section-title-left .title{
margin-bottom: 0;
}
.section-title .sub-title {
font-family: 'Asap', sans-serif;
font-weight: 400;
font-size: 1rem;
line-height: 1.5;
letter-spacing: 0.5px;
color: #314158;
}
.section-title.section-title-left .sub-title{
text-align: left;
}
.showmore {
border-radius: 999px;
border: 1px solid var(--primary-700, #00A63E);
color: var(--primary-700, #00A63E);
/* Asap/Label/Large */
font-family: Asap;
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 1.42857; /* 142.857% */
letter-spacing: 0.1px;
display: flex;
padding: 8px 16px;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.showmore::after {
content: '';
width: 20px;
height: 20px;
flex-shrink: 0;
display: block;
mask-image: url('data:image/svg+xml,');
background-color: var(--primary-700, #00A63E);
}
.showmore:hover {
background-color: var(--primary-700, #00A63E);
color: #FFF;
}
.showmore:hover::after {
background-color: #FFF;
}
.sectionTinTuc-slide .item-tintuc .img-fluid {
aspect-ratio: 1.47;
border-radius: 16px;
margin-bottom: 12px;
}
.sectionTinTuc-slide .item-tintuc .item-title {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-family: 'Asap', sans-serif;
font-weight: 600;
font-size: 1rem;
line-height: 1.5;
color: #0F172B;
letter-spacing: 0.15px;
margin-bottom: 4px;
}
.sectionTinTuc-slide .item-tintuc .item-summary {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
margin-bottom: 0;
letter-spacing: 0.5px;
}
.sectionTinTuc-slide .item-tintuc .item-date {
display: block;
margin-bottom: 12px;
color: #62748E;
padding-left: 20px;
position: relative;
}
.sectionTinTuc-slide .item-tintuc .item-date:before {
content: '';
position: absolute;
left: 0;
top: 3px;
width: 16px;
height: 16px;
background-image: url('../img/calendar-icon.png');
background-size: contain;
background-repeat: no-repeat;
}
/******************************************************************/
/*********************************BANNER MAIN*********************************/
/******************************************************************/
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50%, rgba(0, 0, 0, 0.80) 100%);
}
.slider-full .overlay {
z-index: 1;
}
.overlay-full {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%);
z-index: 1;
}
@keyframes zoom-in-zoom-out {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.5, 1.5);
}
100% {
transform: scale(1, 1);
}
}
@keyframes zoom-in-only {
0% {
transform: scale(1, 1);
}
20% {
transform: scale(1.5, 1.5);
}
100% {
transform: scale(1, 1);
}
}
@keyframes fadezoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.16);
}
}
.slick-main .slick-item {
height: 100vh;
width: 100%;
}
.slick-item img {
height: 100%;
width: 100%;
object-fit: cover;
}
.slide-animation img {
animation: fadezoom 15s 0s forwards;
}
@keyframes fadezoom {
0% {
transform: scale(1);
}
100% {
transform: scale(1.16);
}
}
/***********BANNER************/
.mainBanner,
.mainBanner .slick-dotted.slick-slider {
margin-bottom: 0
}
.mainBanner.mb-60 {
margin-bottom: 60px;
}
.slide-areas.slider-full .slick-wrapper .slide-item {
height: calc(100vh - 70px);
}
.slide-areas .slick-wrapper .slide-item {
position: relative;
}
.slide-areas .slick-wrapper .slide-item img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
.slide-areas.slider-full .slick-wrapper .slide-item .slide-caption {
position: absolute;
color: #FFFFFF;
bottom: 200px;
z-index: 2;
}
.slide-areas.slider-full .slick-wrapper .slide-item .slide-caption .slide-title {
color: var(--Content-text-white, #FFF);
/* Playfair Display/Display/Medium */
font-family: "Playfair Display";
font-size: 2.8125rem;
font-style: normal;
font-weight: 800;
line-height: 1.4; /* 115.556% */
letter-spacing: 0px;
text-align: left;
}
.slide-areas.slider-full .slick-wrapper .slide-item .slide-caption .slide-subtitle,
.slide-areas.slider-full .slick-wrapper .slide-item .slide-caption .slide-subtitle p {
color: var(--Content-text-white, #FFF);
/* Asap/Title/Large */
font-family: Asap;
font-size: 1.25rem;
font-style: normal;
font-weight: 500;
line-height: 1.4; /* 140% */
letter-spacing: 0.5px;
text-align: left;
max-width: 700px;
display: block;
}
.slide-areas .slick-dots {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
width: fit-content;
display: flex;
padding: 4px 8px;
align-items: center;
gap: 8px;
z-index: 1;
border-radius: 999px;
background: rgba(255, 255, 255, 0.40);
}
.slide-areas .slick-dots li {
width: 8px;
height: 8px;
border-radius: 999px;
opacity: 0.5;
background: var(--Background-bg-white, #FFF);
margin: 0;
transition: all 0.5s ease;
}
.slide-areas .slick-dots li.slick-active {
width: 24px;
height: 8px;
border-radius: 999px;
opacity: 1;
background: var(--Background-bg-white, #FFF);
}
.slide-areas .slick-dots li button {
padding: 0;
width: 100%;
height: 100%;
}
.slide-areas .slick-dots li button:before {
content: none
}
/*****************************************************************************************************/
/**********************************KHUNG HỘ KINH DOANH****************************************/
/*****************************************************************************************************/
.slick-wrapper-diem-du-lich .slick-list {
margin: 0 -8px;
}
.slide-item-diem-du-lich {
padding: 0 8px;
}
/* .slide-item-diem-du-lich.slick-slide.slick-current {
width: 655px;
}
.slide-item-diem-du-lich.slick-slide {
width: 327px;
}
.slide-item-diem-du-lich.slick-current .destination-content .destination-img {
aspect-ratio: 648 / 347;
} */
.destination-content .destination-news{
display: inline-block;
cursor: pointer;
perspective: 500px;
position: relative;
height: 100%;
width: 100%;
border-radius: 12px;
overflow: hidden;
}
.destination-content .destination-img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
margin: 0;
border-radius: 12px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 78.1%, rgba(0, 0, 0, 0.8) 100%);
aspect-ratio: 312 / 448;
}
.destination-content .destination-news .destination-caption .btn-destination a {
padding: 9px 30px;
}
.destination-content .destination-link .destination-description {
display: none;
}
.destination-content .destination-description {
border-radius: 12px;
position: absolute;
bottom: 0;
padding: 10px;
height: 100%;
left: 0;
right: 0;
opacity: 1;
transition: all 0.5s ease-out;
}
.destination-description .destination-link{
padding: 10px;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 12px;
position: absolute;
height: calc(100% - 20px);
width: calc(100% - 20px);
display: flex;
justify-content: flex-end;
align-items: flex-start;
flex-direction: column;
}
.destination-content:hover .destination-description .destination-link .destination-title,
.destination-content:hover .destination-description .destination-link .destination-address {
display: none;
}
.destination-content .destination-link,
.destination-content .destination-link a {
color: #FFF;
/* Asap/Headline/Small */
font-family: Asap;
font-size: 1.25rem;
font-style: normal;
font-weight: 600;
line-height: 1.333; /* 133.333% */
}
.destination-content .destination-description .destination-link {
font-size: 1.125rem;
text-align: left;
}
.destination-content .destination-caption {
--padding: 24px;
width: calc(100% + 1px);
height: calc(100% + 1px);
padding: var(--padding);
position: absolute;
top: 0;
left: 0;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
border-radius: 12px;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.destination-content .destination-caption .main-destination-detail {
position: absolute;
width: calc(100% - var(--padding) * 2);
bottom: 24px;
}
.destination-content .destination-address {
color: var(--Content-text-white, #FFF);
/* Asap/Body/Medium */
font-family: Asap;
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
line-height: 1.42857; /* 142.857% */
letter-spacing: 0.25px;
}
.destination-content .introdution {
background: #FFFFFF;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
border-radius: 12px;
padding: 24px;
}
.destination-content .introdution h1 {
color: var(--Content-text-primary, #0F172B);
/* Asap/Headline/Small */
font-family: Asap;
font-size: 1.5rem;
font-style: normal;
font-weight: 600;
line-height: 1.333; /* 133.333% */
margin-bottom: 1rem;
}
.destination-content .introdution .intro-summary {
color: var(--text-secondary);
/* Asap/Body/Large */
font-family: Asap;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.5; /* 150% */
letter-spacing: 0.5px;
}
.destination-content .introdution .btn-introdution a {
padding: 14px 30px;
}
.destination-content .destination-news:hover .destination-caption {
opacity: 1;
animation-timing-function: cubic-bezier(0.45, 1.45, 0.8, 1);
animation-duration: 500ms;
z-index: 3;
}
.destination-content .introdution-details,
.destination-content .destination-details {
display: flex;
padding: 8px 16px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 999px;
background: var(--Secondary-100, #FFF5C6);
color: var(--primary-700, #00A63E);
/* Asap/Label/Large */
font-family: Asap;
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 1.42857; /* 142.857% */
letter-spacing: 0.1px;
cursor: pointer;
transition: all 0.3s ease;
}
.destination-content .introdution-details:hover,
.destination-content .destination-details:hover {
background-color: var(--primary-700, #00A63E);
color: #FFF;
}
.destination-content .introdution-details::after,
.destination-content .destination-details::after {
content: '';
width: 20px;
height: 20px;
flex-shrink: 0;
display: block;
background-image: url('data:image/svg+xml,');
}
.destination-content .introdution-details:hover::after,
.destination-content .destination-details:hover::after {
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(65deg) brightness(100%) contrast(103%);
}
.destination-content .destination-news .destination-caption .destination-link{
padding-bottom: 8px;
}
.destination-content .destination-news .destination-caption .destination-summary{
color: #FFF;
/* Asap/Body/Large */
font-family: Asap;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.5; /* 150% */
letter-spacing: 0.5px;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 12;
margin-bottom: 1rem;
/* min-height: calc(100% - 86px); */
}
.destination-content:nth-child(4) .destination-news .destination-caption .destination-summary,
.destination-content:nth-child(5) .destination-news .destination-caption .destination-summary {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 4;
min-height: unset;
}
.destination-content .destination-news .destination-caption .btn-destination a {
padding: 9px 30px;
}
.slick-arrow.slick-prev, .slick-arrow.slick-next {
box-sizing: border-box;
border: 1px solid #e5e7eb;
border-radius: 999px;
padding: 12px;
width: 48px;
height: 48px;
background-color: #FFF !important;
background-repeat: no-repeat !important;
background-size: 24px 24px !important;
background-position: center !important;
z-index: 1;
top: 50%;
transform: translateY(-50%);
}
.half-arrows .slick-arrow {
box-sizing: border-box;
border-radius: 999px;
padding: 12px;
width: 32px;
height: 48px;
z-index: 1;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 4px;
background: rgba(0, 0, 0, 0.60) !important;
}
.hover-arrows:hover .slick-arrow {
display: flex;
}
.hover-arrows .slick-arrow {
display: none;
}
.half-arrows .slick-arrow::before {
content: none !important
}
.half-arrows .slick-arrow.slick-prev {
border-radius: 0 999px 999px 0;
left: 0;
padding: 12px 8px 12px 0 !important;
}
.half-arrows .slick-arrow.slick-next {
right: -3px;
border-radius: 999px 0 0 999px;
padding: 12px 0 12px 8px !important;
}
.destination-group {
--item: 4;
--gap: 24px;
display: flex;
flex-wrap: wrap;
gap: var(--gap);
}
.three_item .destination-group {
--item: 3;
}
.two_item .destination-group {
--item: 2;
}
.destination-group .destination-content {
flex: 0 0 calc((100% - (var(--item) - 1) * var(--gap)) / var(--item));
max-width: calc((100% - (var(--item) - 1) * var(--gap)) / var(--item));
}
/* 3 item in 991 px */
@media (max-width: 991px) {
.destination-group {
--item: 3;
}
}
/* 2 item in 767 px */
@media (max-width: 767px) {
.destination-group {
--item: 2;
--gap: 16px;
}
}
/*****************************************************************************************************/
/**********************************KHUNG TRANG DANH SÁCH VÀ TRANG CHI TIẾT****************************************/
/*****************************************************************************************************/
.headerPage-banner {
position: relative;
width: 100%;
height: 208px;
overflow: hidden;
background:
linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), /* Lớp overlay đen mờ */
url(../img/innerBg.png); /* Hình nền */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.headerPage-banner .headerPage-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
width: 100%;
}
.headerPage-banner .headerPage-title h1 {
margin-bottom: 0;
color: var(--Content-text-white, #FFF);
text-align: center;
/* Playfair Display/Display/Medium */
font-family: "Playfair Display";
font-size: 2.8125rem;
font-style: normal;
font-weight: 800;
line-height: 1.1556; /* 115.556% */
}
.headerPage-banner .headerPage-title .breadcrumb {
display: flex;
align-items: center;
gap: 8px;
}
.headerPage-banner .headerPage-title .breadcrumb * {
color: var(--Content-text-white, #FFF);
/* Asap/Label/Large */
font-family: Asap;
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 1.42857; /* 142.857% */
letter-spacing: 0.1px;
}
.headerPage-banner .headerPage-title .breadcrumb span {
opacity: 0.7;
}
.pagination {
display: flex;
justify-content: center;
margin-top: 2.5rem;
gap: 8px;
}
.pagination li {
display: flex;
min-width: 40px;
min-height: 40px;
padding: 8px;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 8px;
border: 1px solid var(--Border-border-secondary, #E2E8F0);
background: var(--Background-bg-white, #FFF);
cursor: pointer;
}
.pagination li a {
color: var(--Content-text-primary, #0F172B);
text-align: center;
/* Asap/Label/Large */
font-family: Asap;
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 142.857% */
letter-spacing: 0.1px;
padding: 0;
border: none;
background-color: transparent;
}
.pagination .page-item.active,
.pagination .page-item:not(.disabled):hover {
background-color: var(--primary-700, #00A63E);
}
.pagination .page-item.disabled {
opacity: 0.5;
}
.pagination .page-item.active .page-link,
.pagination .page-item:hover .page-link {
z-index: 3;
color: #fff;
background-color: transparent;
border-color: unset;
}
.pagination .page-item.first a,
.pagination .page-item.last a,
.pagination .page-item.prev a,
.pagination .page-item.next a {
font-size: 0;
width: 0;
display: none;
}
.pagination .page-item.first::after,
.pagination .page-item.last::after,
.pagination .page-item.prev::after,
.pagination .page-item.next::after {
content: '';
width: 24px;
height: 24px;
display: block;
background-size: contain;
background-repeat: no-repeat;
background-color: var(--Content-text-primary, #0F172B);
}
.pagination .page-item:not(.disabled).first:hover::after,
.pagination .page-item:not(.disabled).last:hover::after,
.pagination .page-item:not(.disabled).prev:hover::after,
.pagination .page-item:not(.disabled).next:hover::after {
background-color: #FFF;
}
.pagination .page-item.first::after {mask-image: url('data:image/svg+xml,');}
.pagination .page-item.last::after {mask-image: url('data:image/svg+xml,');}
.pagination .page-item.prev::after {mask-image: url('data:image/svg+xml,');}
.pagination .page-item.next::after {mask-image: url('data:image/svg+xml,');}
/*****************************************************************************************************/
/**********************************KHUNG CHI TIẾT DU LỊCH - ĐỊA ĐIỂM****************************************/
/*****************************************************************************************************/
.TinBai_BaiViet_DLNN .news_image {
width: 100%;
}
.TinBai_BaiViet_DLNN .news-image-slider {
width: 100%;
position: relative;
background: rgb(226, 232, 240);
border-radius: 16px;
overflow: hidden;
}
.TinBai_BaiViet_DLNN .news-image-item {
width: 100%;
text-align: center;
}
.TinBai_BaiViet_DLNN .news-image-item img {
width: 100%;
height: auto;
max-height: 464px;
object-fit: contain;
cursor: pointer;
}
.TinBai_BaiViet_DLNN .news-image-thumb {
width: 100%;
margin-top: 15px;
}
.TinBai_BaiViet_DLNN .news-image-thumb-item {
text-align: center;
padding: 5px;
}
.TinBai_BaiViet_DLNN .news-image-thumb-item img {
width: 100%;
height: 112px;
object-fit: cover;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 8px;
}
.TinBai_BaiViet_DLNN .news-image-thumb-item img:hover {
border: 6px solid transparent;
border-color: rgba(0, 0, 0, 0.50);
opacity: 0.8;
}
.TinBai_BaiViet_DLNN .news-image-thumb .slick-slide.slick-current img {
border: 6px solid transparent;
border-color: rgba(0, 0, 0, 0.50);
opacity: 1;
}
.ChiTietTinBai {
padding-top: 60px;
}
.ChiTietTinBai.TinBai_BaiViet_DLNN .TinBai_GioiThieu .news_title {
font-family: "Asap";
font-size: 1.5rem;
font-weight: 600;
line-height: 1.33;
margin-bottom: 4px;
}
.ChiTietTinBai.TinBai_BaiViet_DLNN .TinBai_GioiThieu .summary-information {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.ChiTietTinBai.TinBai_BaiViet_DLNN .TinBai_GioiThieu .summary-information > * {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.ChiTietTinBai.TinBai_BaiViet_DLNN .TinBai_GioiThieu .summary-information > *:not(:last-child)::after {
content: '';
display: block;
width: 6px;
height: 6px;
aspect-ratio: 1 / 1;
background: var(--Border-border-primary, #CAD5E2);
border-radius: 999px;
margin-left: 8px;
}
.ChiTietTinBai.TinBai_BaiViet_DLNN .TinBai_GioiThieu .summary-information * {
overflow: hidden;
color: var(--special-template-text-1) !important;
/* Asap/Body/Large */
font-family: "Asap";
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.5; /* 150% */
letter-spacing: 0.5px;
}
.ChiTietTinBai.TinBai_BaiViet_DLNN .TinBai_GioiThieu .summary-information .map {
color: var(--special-template-title-2) !important;
}
.ChiTietTinBai.TinBai_BaiViet_DLNN .TinBai_GioiThieu .new_summary {
font-weight: 400;
text-align: justify;
margin-bottom: 1.5rem;
}
.ChiTietTinBai .Media {
margin-bottom: 1.5rem;
}
.ChiTietTinBai.TinBai_BaiViet_DLNN .slick-arrow.slick-prev {
left: 16px;
}
.ChiTietTinBai.TinBai_BaiViet_DLNN .slick-arrow.slick-next {
right: 16px;
}
.ChiTietTinBai.TinBai_BaiViet_DLNN .TinBai_Media .news_video, .main_media .video-main {
height: 100%;
}
/* Video Slider Styling */
.ChiTietTinBai.TinBai_BaiViet_DLNN .news-video-slider {
width: 100%;
}
.ChiTietTinBai.TinBai_BaiViet_DLNN .news-video-item {
padding: 0 8px;
text-align: center;
position: relative;
}
.ChiTietTinBai.TinBai_BaiViet_DLNN .news-video-item img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border-radius: 8px;
cursor: pointer;
}
.ChiTietTinBai.TinBai_BaiViet_DLNN .news-video-item .play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 10;
}
.TinBai_Khac .Title {
padding-bottom: 1.5rem;
padding-left: 0;
margin: 0;
border-bottom: none;
color: var(--Content-text-primary, #0F172B) !important;
/* Asap/Headline/Small */
font-family: "Asap";
font-size: 1.5rem;
font-style: normal;
font-weight: 600;
line-height: 1.33; /* 133.333% */
text-transform: none;
}
.TinBai_Khac {
padding-top: 0;
border-top: none;
}
.TinBai_Khac .Title::before {
content: none;
}
.TinBai_Khac .list_news {
display: flex;
flex-direction: column;
gap: 24px;
}
.TinBai_Khac .news_other .list_news li:not(:last-of-type) {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0;
}
.Media .news_thumb img {
max-width: 100%;
border-radius: 16px;
}
.TinBai_Khac .news_other .list_news li .news_info {
flex-direction: column;
align-items: flex-start;
}
.TinBai_Khac .news_other .list_news li .news_info img {
border-radius: 16px;
aspect-ratio: 312 / 180;
width: 100%;
height: 100%;
object-fit: cover;
}
.ChiTietTinBai .TinBai_GioiThieu .news_title {
font-family: "Asap";
font-size: 1.5rem;
font-weight: 600;
line-height: 1.33;
margin-bottom: 4px;
}
.ChiTietTinBai .TinBai_GioiThieu .news_date {
overflow: hidden;
color: #62748E !important;
font-family: "Asap";
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.5px;
}
.ChiTietTinBai .TinBai_GioiThieu .new_summary {
font-weight: 400;
text-align: justify;
margin-bottom: 1.5rem;
font-size: 1rem;
letter-spacing: 0.5px;
}
.ChiTietTinBai .TinBai_ChiTiet .news_content span,
.ChiTietTinBai .TinBai_ChiTiet .news_content p span {
font-family: "Asap" !important;
font-size: 1rem;
background-color: transparent !important;
}
.TinBai_Khac .news_other .list_news li .news_title a {
font-family: "Asap";
}
.ChiTietTinBai .Media .news_thumb img {
border-radius: 16px;
}
.TieuDe {
color: var(--Content-text-primary, #0F172B);
font-family: "Asap";
font-size: 1.5rem;
font-style: normal;
font-weight: 600;
line-height: 1.333;
margin-bottom: 1rem;
}
.TinBai_Khac .news_other .list_news li .news_info {
display: flex;
gap: 8px;
}
.TinBai_Khac .news_other .list_news li .news_title a {
color: var(--Content-text-primary, #0F172B);
/* Asap/Title/Medium */
font-family: Asap;
font-size: 1rem;
font-style: normal;
font-weight: 600;
line-height: 1.5; /* 150% */
letter-spacing: 0.15px;
}
/*****************************************************************************************************/
/**********************************KHUNG CHUYÊN MỤC***************************************/
/*****************************************************************************************************/
/* .showmore {
color: var(--special-template-title-2) !important;
} */
.DLNN_ListTinBai.DanhSachTinBai .list_news li .item_img_link img {
width: 100%;
aspect-ratio: 336 / 212;
object-fit: cover;
border-radius: 16px;
}
.DLNN_ListTinBai.DanhSachTinBai .list_news li .item_img_link {
margin-right: 1.5rem;
}
.DLNN_ListTinBai.DanhSachTinBai .list_news li:not(:last-of-type) {
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid #E2E8F0;
}
.DLNN_ListTinBai.DanhSachTinBai .list_news li .news_title a {
font-family: "Asap";
font-size: 1.25rem;
}
.ChiTietTinBai .TinBai_GioiThieu .news_date::before {
content: '';
display: block;
width: 24px;
height: 24px;
flex-shrink: 0;
background-color: #0F172B;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
mask-image: url('data:image/svg+xml,');
}
.ChiTietTinBai .TinBai_GioiThieu .news_date {
display: flex;
align-items: center;
}
/*****************************************************************************************************/
/**********************************KHUNG THƯ VIỆN MEDIA***************************************/
/*****************************************************************************************************/
.category-media_list .category-list,
.media-wrapper .item-main {
display: flex;
flex-wrap: wrap;
margin: 0;
--item: 3;
--gap: 24px;
gap: var(--gap);
}
.category-media_list .category-list .category-item,
.media-wrapper .item-main .item {
flex: 0 0 calc((100% - (var(--item) - 1) * var(--gap)) / var(--item));
max-width: calc((100% - (var(--item) - 1) * var(--gap)) / var(--item));
padding: 0;
margin-bottom: 0;
}
.media-wrapper .item-main .item .image-light > a {
border-radius: 16px;
overflow: hidden;
}
.media-wrapper .item-main .item .image-light {
position: relative;
}
.media-wrapper .item-main .item .image-light a::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 16px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 50%, rgba(0, 0, 0, 0.80) 100%);
z-index: 2;
pointer-events: none;
}
.category-media_list .category-list .category-item .category-inner,
.media-wrapper .item-main .item .album-lg,
.media-wrapper .item-main .item .videosAlbum {
position: relative;
}
.media-wrapper .item-main .item .image-title {
position: absolute;
bottom: 1.5rem;
left: 1.5rem;
z-index: 3;
}
.media-wrapper .item-main .item .image-title span {
color: var(--Content-text-white, #FFF);
/* Asap/Title/Large */
font-family: "Asap";
font-size: 1.25rem;
font-style: normal;
font-weight: 500;
line-height: 1.4; /* 140% */
}
.media-wrapper .item-main .item .total-item {
top: 1.25rem;
bottom: unset;
right: 0.75rem;
padding: 0.35rem;
font-size: 0.875rem;
}
/*****************************************************************************************************/
/**********************************KHUNG KHÁM PHÁ VR360***************************************/
/*****************************************************************************************************/
#VR360_Tabs {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: none;
gap: 8px;
margin-bottom: 24px;
}
#VR360_Tabs h4 {
margin-bottom: 0;
}
#VR360_Tabs .list_tab {
display: flex;
justify-content: flex-end;
border-bottom: none;
gap: 8px;
}
#VR360_Tabs li .nav-link {
display: flex;
padding: 8px 16px;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 8px;
border: 1px solid var(--Border-border-secondary, #E2E8F0);
color: var(--special-template-text-1);
/* Asap/Body/Large */
font-family: "Asap";
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.5; /* 150% */
letter-spacing: 0.5px;
}
#VR360_Tabs li .nav-link.active,
#VR360_Tabs li:hover .nav-link {
background-color: var(--special-template-title-2);
color: var(--white);
}
#VR360_Tabs li .nav-link.active i,
#VR360_Tabs li:hover .nav-link i {
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(329deg) brightness(112%) contrast(101%);
}
.view_list_VR360 ul {
display: flex;
flex-wrap: wrap;
--item: 3;
--gap: 24px;
gap: var(--gap);
}
.view_list_VR360 ul li {
flex: 0 0 calc((100% - (var(--item) - 1) * var(--gap)) / var(--item));
max-width: calc((100% - (var(--item) - 1) * var(--gap)) / var(--item));
position: relative;
border-radius: 16px;
overflow: hidden;
}
.view_list_VR360 ul li .group-image {
position: relative;
}
.view_list_VR360 ul li .group-image img {
aspect-ratio: 424 / 272;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 16px;
}
.view_list_VR360 ul li .VR360-title {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
margin-bottom: 0;
}
.view_list_VR360 ul li .VR360-title a {
color: var(--Content-text-white, #FFF);
text-align: center;
/* Asap/Title/Large */
font-family: "Asap";
font-size: 1.25rem;
font-style: normal;
font-weight: 600;
line-height: 1.4; /* 140% */
}
.view_list_VR360 ul li .group-image .svg_vr360.svg_big {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
aspect-ratio: 1/1;
background-image: url('data:image/svg+xml,');
}
.view_list_VR360 ul li .group-image a {
display: block;
width: 100%;
height: 100%;
}
.ChiTietTinBai .TinBai_BaiViet .TinBai_Info {
border-radius: 1rem;
background-color: #ebf7ef;
padding: 1rem;
margin-bottom: 1rem;
}
.ChiTietTinBai .TinBai_BaiViet .TinBai_Info .news_info_item:not(:last-of-type) {
margin-bottom: 0.5rem;
}
.ChiTietTinBai .TinBai_BaiViet .TinBai_Info .news_info_item span:first-of-type {
font-weight: 600;
margin-right: 0.25rem;
}
/************************************************************************************************************************************************/
/*****************************************************TRANG THÀNH PHẦN - DANH SÁCH TIN BÀI***********************************************************/
/************************************************************************************************************************************************/
.DanhSachTinBai .list_news {
display: flex;
flex-direction: column;
gap: 30px;
flex-wrap: wrap;
}
.DanhSachTinBai .list_news li {
display: flex;
gap: 20px;
}
.DanhSachTinBai .list_news li .item_img_link {
display: block;
width: 240px;
flex-shrink: 0;
}
.DanhSachTinBai .list_news li .item_img {
border-radius: 10px;
width: 100%;
height: 100%;
object-fit: cover;
}
.DanhSachTinBai .list_news li .news_info .news_title a {
color: var(--text-mi, #008130) !important;
/* text-align: justify; */
font-family: "Asap";
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 1.444; /* 144.444% */
margin-bottom: 5px;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.DanhSachTinBai .list_news li .news_info .item_category {
color: #00A6F4 !important;
/* text-align: justify; */
font-family: "Asap";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 1.444; /* 144.444% */
margin-bottom: 5px;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.news_title a img:first-child {
margin-left: 10px;
}
.news_title a img {
margin-left: 5px;
}
.DanhSachTinBai .list_news li .news_info .news_date {
color: #62748E;
font-family: Asap;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 1.5; /* 157.143% */
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 5px;
}
.DanhSachTinBai .list_news li .news_info .news_date::before {
content: "";
width: 16px;
height: 16px;
display: block;
background-color: #62748E;
mask-image: url('data:image/svg+xml,');
}
.DanhSachTinBai .list_news li .news_info .news_summary {
overflow: hidden;
color: var(--text-mi, #182940);
/* text-align: justify; */
font-family: Asap;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 1.5; /* 150% */
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.TieuDe_AnhDaiDien {
margin-bottom: 1.5rem;
display: flex;
justify-content: center;
}
.TieuDe_AnhDaiDien img {
border-radius: 16px;
}
.group-search {
gap: 16px;
margin: 3rem 0;
display: flex;
align-items: flex-end;
}
.group-search .form-group {
display: flex;
flex-direction: column;
flex: 1;
}
.group-search .form-group #keyword {
display: flex;
padding: 8px 16px;
align-items: center;
gap: 8px;
border-radius: 999px;
border: 1px solid var(--Border-border-primary, #CAD5E2);
background-position: calc(100% - 16px) 50%;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,');
}
.group-search .form-group label {
color: var(--Content-text-tertiary, #62748E);
/* Asap/Body/Medium */
font-family: Asap;
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
line-height: 1.42857; /* 142.857% */
letter-spacing: 0.25px;
margin-bottom: 4px;
}
.group-search #btnSearch {
border-radius: 999px;
background: var(--primary-700, #00A63E);
display: flex;
padding: 8px 16px;
justify-content: center;
align-items: center;
gap: 8px;
color: #FFF;
/* Asap/Label/Large */
font-family: Asap;
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 1.42857; /* 142.857% */
letter-spacing: 0.1px;
border: none;
height: 42px;
cursor: pointer;
width: 120px;
transition: all 0.3s ease;
}
.group-search #btnSearch:hover {
background: #FFF;
color: var(--primary-700, #00A63E);
border: 1px solid var(--primary-700, #00A63E);
}
@media screen and (max-width: 767px) {
.row.row-lienhe {
flex-direction: column;
gap: 24px;
}
}
@media (min-width: 992px) {
.navbar-expand-sm .navbar-toggler {
display: none;
}
}
@media screen and (min-width: 576px) and (max-width: 991px) {
.navbar-expand-sm .navbar-collapse.collapse:not(.show) {
display: none !important;
}
.navbar-expand-sm .navbar-collapse.collapse {
width: 100%;
flex-shrink: 0;
}
.navbar > .container {
flex-wrap: wrap;
}
.navbar-expand-sm .navbar-nav {
flex-direction: column;
justify-content: flex-start;
}
}
@media only screen and (max-width: 991px) {
.navbar-expand-sm .navbar-toggler {
display: block;
position: absolute;
right: 24px;
top: 16px;
}
.navbar-expand-sm .navbar-collapse.collapse:not(.show) {
display: none !important;
}
.navbar-nav .nav-item #search {
width: 100%;
}
.navbar-expand-sm .navbar-nav .nav-item:not(:last-child) {
margin-right: 0;
}
.pagination {
margin-bottom: 2rem;
}
.TinBai_Khac .news_other .list_news li .news_info {
flex-direction: row;
gap: 10px;
}
.TinBai_Khac .news_other .list_news li .news_info .item_img_link {
display: block;
width: 40%;
aspect-ratio: 312 / 180;
flex-shrink: 0;
}
.section-tinTuc {
padding: 30px 0 30px;
}
.navbar-nav .nav-item.language-selector {
margin-top: 12px;
}
}
@media only screen and (max-width: 767px) {
.pagination {
margin: 1.5rem 0 2rem;
flex-wrap: wrap;
}
.headerPage-banner .headerPage-title h1 {
font-size: 2rem;
}
}
@media only screen and (max-width: 575px) {
}
@media only screen and (max-width: 400px) {
.TinBai_Khac .news_other .list_news li .news_info {
flex-direction: column;
}
.TinBai_Khac .news_other .list_news li .news_info .item_img_link {
width: 100%;
}
}