* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@font-face {
font-family: 'svn-gilroy bold';
src: url(../webfonts/gilroy-bold.woff2)
}
:root {
--next-show-color: #FFFFFFA3;
--live-color: #FFFFFF;
--nav-text-color: #757575;
--line-color: rgba(112,112,112,0.2);
--post-text-color: #616161;
--new-heading-text-color: #000000DE;
--category-color: #00000099;
--category-line-color: #707070DE;
--main-red: #7F0000;
--icon-color-1: #00000052;
--roboto-font: 'Roboto Slab', serif;
--merri-font: 'Merriweather', serif;
--barlow-semi-font: 'Barlow Semi Condensed', sans-serif;
--svn-gilrory: 'SVN-Gilroy Black', serif;
}
.color-a {
color: #000000DE !important;
}
a {
list-style: none !important;
text-decoration: none !important;
}
/*Head*/
.top-header {
/*background-image: url(../img/header-bg.png);*/
background-image: url(../img/header-bg.png);
background-repeat: no-repeat;
background-size: contain;
}
.top-header > .col-8> #showmenu {
display: none !important;
}
.top-header> .col-8{
padding-left:12px;
}
.top-header > .justify-content-end{
padding-right:12px;
}
.weather {
/*padding: 0.1in 0;*/
padding-top:5px;
font-family: var(--category-heading-font);
}
.weather > .date {
color: #818181;
font-size: 14px;
}
.weather > p {
font-size: 11px;
font-family: var(--merri-font);
}
.weather > .temperature {
color: #616161;
padding-top:10px !important;
}
.weather > .fw-bold{
margin-top: 3px;
}
#showmenu {
display: flex;
margin-top: 3px;
margin-right: 6px;
}
.collapse-menu{
display:none;
}
.container > .box {
padding: 0.3in 0;
font-family: var(--category-heading-font);
color: var(--text-gray-secondary);
}
.container > .box {
font-size: 12px;
color: var(--category-color);
margin-right: 12px;
}
.weather > .img > img {
width: 75%;
height: auto;
}
.weather > p:hover {
color: var(--main-red);
}
.weather > .temperature:hover {
color: var(--main-red);
}
.weather > .col-2 > .img {
width: 100%;
height: auto;
}
.weather > .col-2 > .img > img {
width: 100%;
height: auto;
}
.container > .box > .search-box input {
border: 2px solid var(--line-color);
font-size: 14px;
padding: .4rem;
border-right: none;
outline: none;
}
.container > .box > .search-box button {
border: 2px solid var(--line-color);
font-size: 14px;
padding: .4rem;
background-color: #FFFFFF;
border-left: none;
margin-left: -5px;
}
.container > .box > .search-box button i {
color: var(--icon-color-1);
}
.container > .box > .login-box > button {
background-color: var(--main-red);
max-height: 37px;
border: none;
padding: .5rem .7rem;
}
.container > .box > .login-box > button > * {
color: #FFFFFF;
font-size: 14px;
}
.container > .box > .btn_login > button {
border: none;
background-color: #fff;
color: var(--text-gray-secondary);
}
.container > .box > .btn_login {
padding: 0 0.1in;
height: 25px;
border-left: 1px solid var(--text-gray-secondary);
}
.container > .box > .btn_login_user{
display: none;
}
.container > .box > .btn_login_user > .d-flex > div {
border-radius: 100%;
width: 35px;
height: 35px;
cursor: pointer;
}
.container > .box > .btn_login_user > .d-flex > p {
cursor: pointer;
}
.container > .box > .btn_login_user > .d-flex > div > img {
border-radius: 100%;
width: 100%;
height: 100%;
}
.container > .box > .btn_login_user > button {
border: none;
background-color: #fff;
color: var(--text-gray-secondary);
}
.container > .box > .btn_login_user {
padding: 0 0.1in;
height: 25px;
/*bottom: 20%;*/
border-left: 1px solid var(--text-gray-secondary);
}
.container > .box > p:hover {
color: var(--main-red);
}
.container > .box > .btn_login_user > div > .position-absolute {
display: none;
top: 140%;
right: 10%;
background-color: #ffffff;
height: auto;
border-radius: 0%;
width: 17em;
font-family: var(--barlow-semi-font);
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
z-index: 999;
}
#userbox.active {
display: block;
}
.container > .box > .btn_login_user > div > .position-absolute > .py-3 {
font-size: 18px;
border-bottom: 1px solid var(--line-color);
}
.container > .box > .btn_login_user > div > .position-absolute > .py-3 > .img {
width: 50px;
height: 40px;
}
.container > .box > .btn_login_user > div > .position-absolute > .py-3 > .img > img {
width: 100%;
height: 100%;
border-radius: 100%;
}
.container > .box > .btn_login_user > div > .position-absolute > .py-2 {
font-size: 16px;
text-align: start;
border-bottom: 1px solid var(--line-color);
}
.container > .box > .btn_login_user > div > .position-absolute > .py-2 > a {
list-style: none;
text-decoration: none;
font-family: var(--roboto-font);
color: var(--category-color);
}
/* MENU */
.sticky {
position: fixed !important;
background-color: #fff;
top: 0;
width: 100%;
/* left: 50%;
transform: translateX(-50%); */
z-index: 5;
}
.line-menu {
background-color: var(--main-red);
border-top: 1px solid var(--line-color);
border-bottom: 1px solid var(--line-color);
z-index: 100;
}
.main-menu {
left: 0;
right: 0;
}
.main-menu > .nav {
padding-left: 10px;
padding-right:10px;
}
.main-menu > .nav > .nav-item {
display: flex;
flex-shrink: 1;
flex-grow: 1;
}
.menu > .nav > .nav-item > a > h2 {
font-family: var(--barlow-semi-font);
font-size: 16px;
color: var(--live-color);
font-weight: bold;
display: block;
width: 100%;
text-align: center;
margin: 0 !important;
line-height: 23px
}
.menu > .nav > .nav-item > a > h3 {
font-family: var(--barlow-semi-font);
font-size: 16px;
color: var(--live-color);
font-weight: bold;
display: block;
width: 100%;
text-align: center;
margin: 0 !important;
line-height: 23px
}
.menu > .nav > .nav-item > .nav-link {
height: 100%;
padding: 0 1rem;
}
.fa-house {
color: white
}
.menu > .nav > .nav-item {
padding: 10px 0;
}
.menu > .nav > .nav-item > button {
border: none;
background-color: var(--main-red);
}
.menu > .nav > .px-2 {
height: 15px;
}
.menu > .nav > .nav-item > button > i {
width: 100%;
height: auto;
color: var(--live-color);
}
/* MENU DROP */
.menu > .nav > .nav-item > .flex-column > li > a > h2 {
color: #000000;
font-size: 14px;
font-weight: 400;
margin: 0 !important
}
.menu > .nav > .nav-item > .flex-column > li > a > h3 {
color: #000000;
font-size: 14px;
font-weight: 400;
margin: 0 !important
}
.menu > .nav > .nav-item > .flex-column {
position: absolute;
display: none;
top: 100%;
background-color: #fff;
z-index: 100;
width: 170px;
padding-top: 1%;
border-top: 4px solid var(--main-red);
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
/* MENU BOTTOM */
.menu-bottom {
position: absolute;
left: 0;
top: 100%;
right: 0;
z-index: 100;
background-color: #F8F8F8;
}
.menu-bottom > .container {
flex-wrap: wrap;
}
.menu-bottom > .container > .col-1 > .d-inline-block > h3 {
font-size: 20px;
font-family: var(--barlow-semi-font);
font-weight: bold;
border-bottom: 2px solid var(--category-line-color);
color: #000000;
}
.menu-bottom > .container > .col-1 {
margin-left: 2.5%;
margin-right: 2.5%;
width: fit-content;
}
.menu-bottom > .container > .col-1 > .pt-2 > a > h2 {
font-size: 14px;
list-style: none;
text-decoration: none;
color: #000000;
font-family: var(--barlow-semi-font);
display: block;
}
.menu-bottom > .container > .col-1 > .pt-2 > a > h3 {
font-size: 14px;
list-style: none;
text-decoration: none;
color: #000000;
font-family: var(--barlow-semi-font);
display: block;
}
.menu-bottom > .container > .me-0 {
width: 12%;
}
.menu-bottom > .container > .col-1 > .py-2 {
font-size: 13px;
font-family: var(--barlow-semi-font)
}
/* HOVER */
.menu > .nav > li:hover > .flex-column {
display: block;
}
.menu > .nav > li:hover {
background-color: #69120c;
}
.flex-column > .nav-item:hover {
background-color: var(--line-color);
}
.video-js .vjs-control-bar {
background-color: #11111284 !important;
}
.vjs-quality-menu-wrapper .vjs-menu .vjs-menu-content {
width: 150px;
height: 100px;
}
/* body */
.line-topstory {
border: 1px solid var(--line-color);
}
.px-2 h2 {
}
.card_news {
flex-wrap: wrap;
}
.card_news > .trend a {
color: #818181;
font-size: 13px;
font-family: var(--barlow-semi-font);
}
.card_news .px-2 {
font-size: 16px;
font-family: var(--barlow-semi-font);
font-weight: bold;
color: #818181;
}
.card_news .tag a{
font-size: 14px;
font-family: var(--barlow-semi-font);
color: #818181;
}
.card_news .trend-hot a{
color: #A10101 !important;
font-weight: 600
}
.card_news .tag:hover {
background-color: #95939347;
cursor:grab;
}
nav > .container > .navbar-brand > h2 {
border-bottom: 3px solid var(--main-red);
color: var(--main-red);
font-weight: bold;
font-family: var(--barlow-semi-font);
}
.navbar > .container > .news-heading-list > .navbar-nav > .nav-item > .nav-link {
color: var(--category-color);
border-left: 2px solid var(--line-color);
font-size: 18px;
font-family: var(--barlow-semi-font)
}
/* Topstory */
.icon-images{
width:5%;
margin-left:5px;
opacity:32%
}
.topstory {
padding-right: 0 !important;
}
.topstory .side-content {
overflow-y: scroll;
max-height: 570px;
}
.topstory > .main-content > p {
font-family: var(--merri-font);
font-size: 14px;
color: var(--post-text-color);
}
.topstory > .main-content h3 {
font-size: 26px;
text-decoration: none;
list-style: none;
font-family: var(--roboto-font);
font-weight: bold;
color: #000000DE;
}
.topstory > .side-content > div.d-flex {
padding: 25px 10px 0px 10px;
border-bottom: 1px solid var(--line-color);
}
.topstory > .side-content > div.d-flex > .aspect-16-9 {
width: 40%;
}
.topstory > .side-content > div.d-flex > .fw-bold {
width: 60%;
}
.topstory > .side-content > div.d-flex > .fw-bold > .red-on-hover > h3 {
list-style: none;
text-decoration: none;
font-size: 18px;
font-family: var(--roboto-font);
font-weight: bold;
color: #000000DE;
}
.topstory > .side-content > div > img {
width: 40%;
height: 30%;
}
.topstory > .side-content > div > div > p {
font-size: 14px;
}
.topstory > .side-content > div > div > div.new_catagory {
color: var(--text-gray-thirty);
}
.topstory > .side-content > div > div > p {
font-size: 18px;
}
.topstory > .side-content > div > div > div.new_catagory > p {
font-size: 15px;
color: #9E9E9E;
}
.topstory > .side-content > div > div > div.new_catagory > i {
padding: 5px 5px 5px 25px;
color: #9E9E9E;
}
.topstory > .side-content > div > div.fw-bold {
padding: 0 0 0 15px;
}
.banner> a > img {
width: 100%;
height: auto;
}
.banner {
padding-top: 10px;
padding-bottom: 0;
border-top: 1px solid var(--line-color);
}
.headline {
color: var(--red);
}
.home-page > .row .icon-box {
position: absolute;
bottom: 10px;
left: 10px;
width: 50px;
height: 50px;
background-color: #00000061;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.home-page > .row .icon-box i {
color: white;
font-size: 25px;
opacity:50%;
}
.home-page > .row > .news-section-first-design> .row {
/*border-bottom: 1px solid var(--line-color);*/
padding-bottom:15px;
}
.home-page > .row > .news-section-first-design > .row > .left-col > .live-block > .live-content .status-box {
position: absolute;
top: 10px;
left: 10px;
z-index: 5;
}
.home-page > .row > .news-section-first-design > .row > .left-col > .live-block > .live-content .status-box .status > * {
color: #FFFFFFA3;
font-size: 11px;
}
.fa-circle-play:before, .fa-play-circle:before {
content: "\f144";
}
.home-page > .row > .news-section-first-design > .row > .left-col > .live-block > .live-content .status-box .status .status-color {
height: 7px;
width: 7px;
border-radius: 50%;
background-color: #E0BF48;
margin-top: 5px;
}
/* .row>.col>.d-flex>.col-3>img{
width: 100%;
height:100%;
} */
.row > .col > a > .py-2 {
font-size: 26px;
color: var(--main-red);
font-weight: bold;
}
.Podcast {
border-bottom: 1px solid var(--line-color);
}
.row > .col > .d-flex > .w75 > a > .fw-bold {
font-size: 22px;
color: #000000;
}
.left-line {
border-left: 1px solid var(--line-color);
}
.y-line {
border-bottom: 1px solid var(--line-color);
}
.row > .col > .d-flex > .aspect-1-1 {
width: 30%;
}
.row > .col > .d-flex > .w75 {
width: 70%;
}
.row > .col > .d-flex > .w75 > .fs6 {
color: #616161;
font-size: 14px;
}
.row > .col > .d-flex > .w75 > .new_catagory {
color: var(--icon-color-1);
font-size: 13px;
}
.row > .col > .d-flex > .w75 > .new_catagory > i {
padding: 5px 5px 0 20px;
}
/* LOGIN */
.blur-block {
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
visibility: hidden;
z-index: 100;
/* padding-top: 5%; */
}
.container-login > button {
border-radius: 100%;
background-color: var(--main-red);
border: none;
height: 30px;
width: 30px;
left: 98%;
bottom: 96%;
}
.container-login > button > i {
font-size: 20px;
border: none;
color: #ffffff;
}
.container-login > .col-6 > .d-flex {
font-family: var(--barlow-semi-font);
font-size: 28px;
color: var(--category-color);
font-weight: bold;
height: 20%;
padding-top: 5%;
padding-bottom: 0;
border-bottom: 2px solid var(--line-color);
}
.container-login > #register {
display: none;
}
.container-login > .col-6 > .container-input {
height: 75%;
}
.container-login > .col-6 > .container-input > i {
font-size: 13px;
color: var(--category-color);
}
.container-login > .col-6 > .container-input > i > a {
font-size: 13px;
color: red;
}
.container-login > .col-6 > .container-input > p {
color: #000000;
font-size: 15px;
font-family: var(--barlow-semi-font);
text-align: center;
}
.container-login > .col-6 > .container-input > .input {
width: 100%;
}
.container-login > .col-6 > .container-input > .input > button {
position: absolute;
top: 10%;
left: 90%;
border: none;
background-color: #fff;
}
.container-login > .col-6 > .container-input > .input > button > i {
color: var(--line-color);
}
.container-login > .col-6 > .container-input > .input > input {
width: 100%;
height: 35px;
font-size: 14px;
font-family: var(--barlow-semi-font);
padding-left: 10px;
}
.container-login > .col-6 > .container-input > a {
color: var(--category-color);
font-size: 12px;
}
.container-login > .col-6 > .container-input > button {
width: 100%;
font-size: 14px;
font-family: var(--barlow-semi-font);
font-weight: bold;
}
.container-login > .col-6 > .container-input > button.mt-2 {
background-color: var(--main-red);
border: 0.3px solid red;
color: #fff;
}
.container-login > .col-6 > .container-input > button.mt-3 {
background-color: #fff;
border: 0.3px solid var(--line-color);
color: var(--category-color);
}
.container-login > .col-6 > .nth2 {
border-bottom: 2px solid var(--line-color);
}
.container-login > .col-6 > .container-input {
border-right: 1px solid var(--line-color);
}
.col-6 > .container-input > .link-fb {
border: 1px solid #3B4F88;
width: 73%;
font-size: 14px;
}
.col-6 > .container-input > .link-fb > a {
list-style: none;
text-decoration: none;
color: #3B4F88;
font-family: var(--barlow-semi-font);
font-weight: bold;
}
.col-6 > .container-input > .link-fb > a > i {
border-right: 1px solid #3B4F88;
}
.col-6 > .container-input > .link-gg {
border: 1px solid #4B99DD;
width: 73%;
font-size: 14px;
}
.col-6 > .container-input > .link-gg {
border: 1px solid #4B99DD;
font-size: 14px;
}
.col-6 > .container-input > .link-gg > a {
list-style: none;
text-decoration: none;
font-family: var(--barlow-semi-font);
font-weight: bold;
}
.col-6 > .container-input > .link-gg > a > i {
border-right: 1px solid #4B99DD;
}
.col-6 > .container-input > .banner {
width: 73%;
}
.col-6 > .container-input > .banner > img {
width: 100%;
height: 100%;
}
/* BTN VIDEO */
.btn-playvideo-max > a > i {
font-size: 58px;
color: #f1f1f1;
}
.btn-playvideo-max {
position: absolute;
z-index: 10;
z-index: 10;
bottom: 20px;
left: 55px;
transform: translate(-50%,-50%);
width: 95px;
height: 29px;
opacity: 55%;
}
.btn-playvideo > a > i {
font-size: 34px;
color: #f1f1f1;
}
.btn-playvideo {
position: absolute;
z-index: 10;
z-index: 10;
bottom: -15px;
left: 20px;
transform: translate(-50%,-50%);
width: 34px;
height: 34px;
opacity:65%;
}
.btn-playmainvideo > i {
font-size: 110px;
color: #f1f1f1;
position: relative;
z-index: 10;
top: -2.5em;
left: 44%;
}
.btn-playmainvideo-style2 {
position: absolute;
z-index: 10;
left: 85%;
bottom: 3%;
height: 69px !important;
width: 70px;
background-color: var(--main-red);
border-radius: 100%;
border: none;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
.btn-playmainvideo-style2 > i {
font-size: 30px;
color: #ffffff;
}
.btn-playvideo-style2 > i {
color: var(--main-red);
font-size: 36px;
}
/* Hai */
::-webkit-scrollbar {
width: 14px;
background-color: transparent;
}
::-webkit-scrollbar-track {
background-color: #F2F1EF;
}
::-webkit-scrollbar-thumb {
background-color: #d6dee1;
border-radius: 20px;
border: 3px solid transparent;
background-clip: content-box;
}
.topstory > .side-content:hover::-webkit-scrollbar-thumb {
display: block;
}
.topstory > .side-content::-webkit-scrollbar-track {
background-color: transparent;
}
.topstory > .side-content::-webkit-scrollbar-thumb {
display: none;
}
::-webkit-scrollbar-thumb:hover {
background-color: #a8bbbf;
}
.topstory > .col-4 > .d-flex > .aspect-16-9 > a > img {
max-height: 86px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #a8bbbf;
}
.col-4 > .live-block > .live-content > img {
position: absolute;
z-index: 0;
}
.col-8 > .aspect-16-9 {
max-height: 466px;
}
.col-8 > .aspect-16-9 > .aspect-content {
max-height: 466px;
}
.aspect-3-6 {
position: relative;
display: block;
}
.aspect-3-6::before {
content: '';
display: block;
width: 100%;
padding-bottom: 180%;
}
.aspect-16-9 {
position: relative;
display: block;
}
.aspect-16-9::before {
content: '';
width: 100%;
display: block;
padding-bottom: 56.25%;
}
.aspect-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.aspect-content-style2 {
position: absolute;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.text-upper {
text-transform: uppercase;
}
.body-text {
font-size: 14px;
color: var(--post-text-color);
font-family: var(--merri-font);
}
.roboto-heading-font {
font-family: var(--roboto-font);
color: var(--new-heading-text-color);
font-weight: bold;
}
.one-line {
display: -webkit-box;
max-height: 2.4rem;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
-webkit-line-clamp: 1;
line-height: 1.2rem;
}
.two-line {
display: -webkit-box;
max-height: 5.6rem;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
-webkit-line-clamp: 2;
}
.two-line-style2 {
display: -webkit-box;
max-height: 3.3rem;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: "----" !important;
white-space: normal;
-webkit-line-clamp: 2;
line-height: 1.6rem;
}
.three-line {
max-height: 2.4rem;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
-webkit-line-clamp: 3;
line-height: 1.2rem;
}
.three-line-1 {
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
-webkit-line-clamp: 3;
line-height: 1.5rem;
}
.three-line-2 {
display: -webkit-box;
max-height: 4.4rem;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
-webkit-line-clamp: 3;
line-height: 1.5rem;
}
.three-line-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
-webkit-line-clamp: 3;
}
.four-line {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
-webkit-line-clamp: 4;
line-height: 1.5rem;
}
.five-line {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
-webkit-line-clamp: 5;
line-height:1.36rem;
}
.six-line {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
-webkit-line-clamp: 6;
line-height: 1.5rem;
}
.view-more {
color: #9E9E9E;
font-family: var(--barlow-semi-font);
font-size: 14pt;
display: none;
}
.border-right-line {
border-right: 1px solid var(--line-color);
}
.border-bottom-line-red {
border-bottom: 1px solid var(--main-red);
}
.font-red {
color: var(--main-red);
font-weight: bold;
}
.live-active {
color: #FFFFFF !important;
font-weight: bold !important;
}
.bottom-line-2 {
border-bottom: 1px solid var(--line-color) !important;
}
.red-on-hover:hover {
color: var(--main-red) !important;
}
/* News Section end border */
.section-bottom-line {
border-bottom: 1px solid var(--line-color);
padding-bottom: 1em;
margin-bottom: 1rem;
}
.section-bottom-line:nth-child(6) {
border: none;
}
.section-bottom-line:nth-child(10) {
border: none;
}
.section-bottom{
border: none;
}
/*.section-bottom-line > .news-section-second-design > .row > .right-col > .news-box {
height: 160px;
}*/
/*.section-bottom-line > .news-section-second-design > .row > .midder-reorganize-col > .news-box {
height: 156px;
}*/
.box-border-bottom {
border-bottom: 1px solid var(--line-color);
}
/* News section First Designs */
.home-page > .row > .news-section-first-design .news-heading h3:hover {
color: var(--main-red);
transition: 300ms;
}
.home-page > .row > .news-section-first-design .news-heading a {
text-decoration: none;
}
.home-page > .row > .news-section-first-design .category-tag h2 {
text-decoration: none;
color: var(--main-red);
font-family: var(--barlow-semi-font);
font-weight: bold;
font-size: 16px;
}
.home-page > .row > .news-section-first-design .category-tag h2:hover {
text-decoration: underline !important;
}
.home-page > .row > .news-section-first-design > .row > .right-col .news-heading h3 {
font-size: 20px;
}
.home-page > .row > .news-section-first-design > .row > .right-col .article-description, .home-page > .row > .news-section-first-design > .row > .left-col > .news-box .article-description {
font-family: var(--merri-font);
font-size: 14px;
}
.home-page > .row > .news-section-first-design > .row > .right-col > .news-block:first-child {
border-bottom: 1px solid var(--line-color);
height: auto;
}
.home-page > .row > .news-section-first-design > .row > .right-col {
width: 26%;
}
.home-page > .row > .news-section-first-design > .row > .midder-col {
width: 44%;
}
.home-page > .row > .news-section-first-design > .row > .left-col {
width: 30%;
}
.home-page > .row > .news-section-first-design > .row > .midder-col {
border-left: 1px solid var(--line-color);
border-right: 1px solid var(--line-color);
}
.home-page>.row>.news-section-first-design>.row >.midder-col>.main-news{
height: 517px;
}
/* .home-page>.row>.news-section-first-design>.row >.midder-col>.main-news>.news-img-box>a>img{
max-height: 363px;
} */
.home-page > .row > .news-section-first-design > .row > .midder-col > .main-news .news-heading h3 {
font-size: 26px;
}
.home-page > .row > .news-section-first-design > .row > .midder-col > .main-news .article-description {
font-size: 14px;
}
.home-page > .row > .news-section-first-design > .row > .midder-col > .sup-main-news .news-heading h3 {
font-size: 15px;
}
.home-page > .row > .news-section-first-design > .row > .left-col > .live-block {
background-image: url('../img/background_live.jpg');
height: 312px;
margin-bottom: 0px !important;
}
.home-page > .row > .news-section-first-design > .row > .left-col > .live-block > .live-heading a {
text-decoration: none;
font-family: var(--barlow-semi-font);
font-weight: 400;
color: #BDBDBD;
font-size: 14px;
opacity:84%;
}
.home-page > .row > .news-section-first-design > .row > .left-col > .live-block > .live-heading div:nth-child(2) a {
border-left: 1px solid #BDBDBD;
border-right: 1px solid #BDBDBD;
}
.home-page > .row > .news-section-first-design > .row > .left-col > .live-block > .live-heading div:nth-child(3) a {
border-right: 1px solid #BDBDBD;
}
.home-page > .row > .news-section-first-design > .row > .left-col > .live-block > .live-content {
max-height: 212px;
position:relative;
}
.home-page > .row > .news-section-first-design > .row > .left-col > .live-block > .live-content .status-box {
position: absolute;
top: 10px;
left: 10px;
z-index: 5;
}
.home-page > .row > .news-section-first-design > .row > .left-col > .live-block > .live-content .status-box .status > * {
color: #FFFFFFA3;
font-size: 11px;
}
.home-page > .row > .news-section-first-design > .row > .left-col > .live-block > .live-content .status-box .status .status-color {
height: 7px;
width: 7px;
border-radius: 50%;
background-color: #E0BF48;
margin-top: 8px;
}
.home-page > .row > .news-section-first-design > .row > .left-col > .live-block > .live-content .status-box .status {
margin-left: 14px;
margin-top: 10px;
}
.home-page > .row > .news-section-first-design > .row > .left-col > .live-block > .live-content .status-box .description {
margin-left: 18px;
font-size: 14px;
color: #FFFFFFDE;
font-family: var(--roboto-font);
}
.home-page > .row > .news-section-first-design > .row > .left-col > .live-block > .next-show p {
color: var(--next-show-color);
font-family: var(--barlow-semi-font);
font-size: 14px;
opacity:84%
}
.vjs-quality-menu-item-sub-label {
display: none;
}
.video-review video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 1;
}
.status-box {
display: none;
}
.live-content:hover .status-box {
display: block !important;
background: -moz-linear-gradient(0deg, rgba(255, 255, 0, 1) 0%, rgba(120, 0, 212, 0) 0%, rgba(52, 53, 53, 1) 100%);
/* safari 5.1+,chrome 10+ */
background: -webkit-linear-gradient(0deg, rgba(255, 255, 0, 1) 0%, rgba(120, 0, 212, 0) 0%, rgba(52, 53, 53, 1) 100%);
/* opera 11.10+ */
background: -o-linear-gradient(0deg, rgba(255, 255, 0, 1) 0%, rgba(120, 0, 212, 0) 0%, rgba(52, 53, 53, 1) 100%);
/* ie 6-9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFF00', endColorstr='#343535', GradientType=1 );
/* ie 10+ */
background: -ms-linear-gradient(0deg, rgba(255, 255, 0, 1) 0%, rgba(120, 0, 212, 0) 0%, rgba(52, 53, 53, 1) 100%);
/* global 94%+ browsers support */
background: linear-gradient(0deg, rgba(255, 255, 0, 1) 0%, rgba(120, 0, 212, 0) 0%, rgba(52, 53, 53, 1) 100%);
width: 100%;
margin: -10px;
}
.sup-main-news > .row > .col-4 > .news-img-box > .aspect-content {
max-height: 112px;
}
.home-page > .row > .news-section-first-design > .row > .left-col > .live-block > .next-show span {
color: var(--live-color);
font-family: var(--roboto-font);
font-size: 16px;
opacity:84%;
}
.home-page > .row > .news-section-first-design > .row > .left-col > .news-box .news-heading h3 {
font-size: 20px;
}
.home-page > .row > .news-section-first-design > .row > .left-col > .live-block-bottom {
/*background-color: #8a0000;*/
height: 40px;
margin-bottom: 10px !important;
margin-top: 18px !important;
border: 1px solid #70707029;
}
.home-page > .row > .news-section-first-design > .row > .left-col > .live-block-bottom:hover {
background-color: #e7e7e7f7;
}
.home-page > .row > .news-section-first-design > .row > .left-col > .news-box:nth-child(3) {
/*border-top: 1px solid var(--line-color);*/
/*border-bottom: 1px solid var(--line-color);*/
height: 130px;
}
.home-page > .row > .news-section-first-design > .row > .left-col > .news-box:nth-child(4) {
border-top: 1px solid var(--line-color);
/*border-bottom: 1px solid var(--line-color);*/
height:147px;
}
/* Second section design */
.home-page .news-section-heading > div:first-child {
/*border-right: 1px solid var(--category-line-color);*/
line-height: 25px;
}
.home-page .news-section-heading > div:first-child h2 {
font-size: 24px;
color: var(--main-red);
font-family: var(--barlow-semi-font);
font-weight: 600;
border-bottom: 2px solid var(--main-red);
}
.home-page .news-section-heading > div p {
font-family: var(--barlow-semi-font);
font-size: 18px;
color: var(--category-color);
}
.home-page .news-section-heading > div h2 {
font-family: var(--barlow-semi-font);
font-size: 18px;
color: var(--category-color);
font-weight: 400
}
.home-page .news-section-heading > div h3 {
font-family: var(--barlow-semi-font);
font-size: 18px;
color: var(--category-color);
font-weight: 400
}
.home-page .news-section-heading > div:first-child h3 {
font-size: 24px;
color: var(--main-red);
font-family: var(--barlow-semi-font);
font-weight: 600;
border-bottom: 2px solid var(--main-red);
}
/*.home-page > .section-bottom-line > .news-section-second-design > .row > .right-col > .news-box {
height: 150px
}*/
.home-page .news-section-second-design > .row > .right-col > .news-box .news-heading h3 {
font-size: 18px;
}
.home-page .news-section-second-design > .row > .right-col > .news-box .news-heading i {
font-size: 18px;
color: var(--icon-color-1);
margin-left: .5rem;
}
.home-page .news-section-second-design > .row > .right-col > .news-box:nth-child(2) {
border-bottom: 1px solid var(--line-color);
border-top: 1px solid var(--line-color);
}
.home-page .news-section-second-design > .row > .midder-col .news-heading h3 {
margin-top: 10px;
font-size: 24px;
}
.home-page .news-section-second-design > .row > .midder-col {
border-left: 1px solid var(--line-color);
border-right: 1px solid var(--line-color);
}
.home-page .news-section-second-design > .row > .left-col > .news-box > .news-img-box > a > img {
max-height: 175.5px;
}
.home-page > .row > .news-section-second-design > .row > .midder-col > .main-news > .news-img-box > a > img {
/*max-height: 300px;*/
}
.home-page .news-section-second-design > .row > .left-col > .news-box > .news-heading h3 {
font-size: 18px;
}
.home-page .news-section-second-design > .row > .left-col-2 > .news-box > .news-heading h3 {
font-size: 18px;
}
.home-page .news-section-second-design > .row > .left-col > .news-box:first-child {
border-bottom: 1px solid var(--line-color);
}
.home-page .news-section-second-design > .row > .left-col-2 > .news-box:first-child {
border-bottom: 1px solid var(--line-color);
}
/* Reorganize Second section design */
.home-page .news-section-second-design > .row > .midder-reorganize-col {
border-left: 1px solid var(--line-color);
border-right: 1px solid var(--line-color);
}
.home-page .news-section-second-design > .row > .midder-reorganize-col .news-box:nth-child(2) {
border-top: 1px solid var(--line-color);
border-bottom: 1px solid var(--line-color);
}
.home-page .news-section-second-design > .row > .right-reorganize-col .news-heading h3 {
font-size: 24px;
}
.home-page .news-section-second-design > .row > .midder-reorganize-col .news-heading h3 {
font-size: 18px;
}
.home-page .news-section-second-design > .row > .midder-reorganize-col .news-heading h3 i {
font-size: 18px;
color: var(--icon-color-1);
}
/* Third section design */
.home-page .news-section-third-design > .row > .main-news .news-heading h3 {
font-size: 22px;
}
.home-page .news-section-third-design > .row > .border-line {
border-left: 1px solid var(--line-color);
border-right: 1px solid var(--line-color);
}
.home-page .news-section-third-design > .row > .grid-col .news-heading h3 {
font-size: 18px;
color: #000000DE;
font-family: var(--roboto-font);
}
.home-page .news-section-third-design > .row > .grid-col > .grid-3-box .category-box .small-category {
font-size: 14px;
font-family: var(--barlow-semi-font);
color: var(--small-category-color);
}
.home-page .news-section-third-design > .row > .grid-col > .grid-3-box .category-box .comment-icon i {
font-size: 14px;
color: var(--icon-color-1);
}
.home-page .news-section-third-design > .row > .grid-col > .grid-3-box .category-box .comment-count p {
color: var(--main-red);
font-size: 14px;
}
/* .home-page>.row > .news-section-third-design>.row>.grid-col .grid-3-box:nth-child(10n-9){
height: 110px;
} */
.home-page .news-section-third-design > .row > .grid-col .grid-3-box {
height: 150px;
}
.home-page .news-section-third-design > .row > .grid-col .video-bottom {
height: 105px !important;
}
.home-page .news-section-third-design > .row > .grid-col > .grid-3-box > .news-box > .news-img-box {
width: 50% !important;
height: 100%;
}
.home-page .news-section-third-design > .row > .grid-col > .grid-3-box > .news-box > .top {
width: 40% !important;
height: 100%;
}
.home-page .news-section-third-design > .row > .grid-col > .grid-3-box > .news-box > .news-heading {
width: 50% !important;
}
.home-page .news-section-third-design > .row > .grid-col .grid-3-box-style2 {
max-height: 190px;
}
.home-page .news-section-third-design > .row > .grid-col .grid-3-box-style2 {
border-bottom: 1px solid var(--line-color);
}
.home-page .news-section-third-design > .row > .grid-col .grid-3-box:nth-child(3) {
border: none;
}
.home-page .news-section-third-design > .row > .grid-col .video-bottom:nth-child(4) {
border: none;
}
.home-page .news-section-third-design > .row > .grid-col .video-bottom:nth-child(3) {
border-bottom: 1px solid var(--line-color);
}
.home-page .news-section-third-design > .row > .grid-col .grid-3-box {
border-bottom: 1px solid var(--line-color);
}
.home-page .news-section-third-design > .row > .col-6 {
width: 42%;
}
.home-page .news-section-third-design > .row > .col-3 {
width: 28%;
}
.w30 {
width: 30% !important;
}
.w47 {
width: 47% !important;
}
.w23 {
width: 23% !important
}
/* News section second style 2 */
.home-page .news-section-second-design > .news-section-heading-style-2 h2 {
color: var(--main-red);
border-bottom: 3px solid var(--main-red);
font-size: 32px;
font-family: var(--barlow-semi-font);
font-weight: bold;
}
.home-page .news-section-second-design > .row > .right-reorganize-col > .main-news > .news-heading-style-2 {
font-size: 22px;
}
.home-page .news-section-second-design > .row > .right-reorganize-col {
width: 49%;
}
.home-page .news-section-second-design > .row > .midder-reorganize-col {
width: 28%;
}
.home-page .news-section-second-design > .row > .left-col-2 {
width: 23%;
}
.home-page .news-section-second-design > .row > .left-col-2 > .news-box > .news-img-box > a > img {
max-height: 198px;
}
.home-page .second-design-style-2 > .row > .midder-reorganize-col > .news-box .news-img-box {
width: 45%;
height: 100%;
}
.home-page .second-design-style-2 > .row > .midder-reorganize-col > .news-box .news-heading {
width: 55%;
}
/* List News */
.list-news > .other-new-box {
border-top: 1px solid var(--line-color);
}
.list-news > .other-new-box > .other-new-img-box {
width: 75% !important;
}
.list-news > .other-new-box > .other-new-img-box > a > .aspect-content {
height: 100%;
}
.list-news > .other-new-box > .other-new-side-box > .other-new-header a {
text-decoration: none;
}
.list-news > .other-new-box > .other-new-side-box > .other-new-header h4 {
font-size: 22px;
}
.list-news > .other-new-box > .other-new-side-box > .other-new-info p {
font-family: var(--merri-font);
color: var(--post-text-color);
display: -webkit-box;
max-height: 5rem;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
-webkit-line-clamp: 3;
line-height: 1.4rem;
}
.list-news > .other-new-box > .other-new-side-box > .other-new-category p {
font-family: var(--barlow-semi-font);
font-size: 14px;
}
.list-news > .other-new-box > .other-new-side-box > .other-new-category .count-num {
color: var(--main-red);
}
.bold-roboto {
font-weight: bold;
font-family: var(--roboto-font);
color: var(--new-heading-text-color) !important;
}
.list-new-container {
border-right: 1px solid var(--line-color);
padding-right: 10px;
margin-left: 5px;
}
.pagination > .page-item {
border: 1px solid var(--line-color);
}
.pagination > .page-item.active {
background-color: var(--main-red);
}
.pagination > .page-item.active > a {
background-color: var(--main-red);
border: 1px solid var(--main-red);
}
.pagination > .page-item > a {
color: #00000080;
}
.row > .col-9 > .col-7 {
border-right: 1px solid var(--line-color);
}
.row > .col-9 > .list-news > .other-new-box > .other-new-img-box {
width: 100%;
}
.row > .col-9 > .list-news > .other-new-box > .other-new-side {
width: 100%;
}
.row > .col-9 > .col-5 > .news-box > .news-heading > a > .roboto-heading-font {
font-size: 18px !important;
color: #000000DE;
}
.topstory > .col-8 {
border-right: 1px solid var(--line-color);
}
.section-bottom-line:nth-child(15) {
/*border-bottom: none !important;*/
}
.section-bottom-line > .news-section-second-design > .reverse > .midder-col > .main-news > .news-img-box {
padding-bottom: 0px !important;
}
/* footer */
footer {
background-color: #F8F8F9;
position: relative;
}
footer > .menu > .nav > .nav-item {
padding: 20px 0;
}
footer > .menu > .nav > .nav-item > a {
font-size: 14px;
color: #424242;
}
footer > .menu > .nav > .nav-item > .nav-link {
border-right: 1px solid var(--line-color);
padding: 0 23px;
}
.back-home {
width: 150px;
height:45px;
display:flex;
text-align:center;
align-items:center;
position: absolute;
top:-13%;
left:74%;
background-color: var(--main-red);
border-radius: 10px;
font-size: 16px;
}
.back-home > a {
text-decoration: none;
list-style: none;
color: #ffffff;
font-family: var(--barlow-semi-font);
}
.back-home > i {
display:none;
}
.footer_center > .container > .footer_left > p {
/*font-size: 12px;*/
line-height: 1.7;
}
/*.footer_center > .container > .footer_right > p {
font-size: 12px;
}*/
footer > .footer_bottom > .container > .title {
display: block;
}
footer > .footer_bottom > .container > .title > .flex{
display:flex;
padding-left:0px;
}
.img-holder {
overflow: hidden;
cursor: pointer;
}
.img-holder .default {
transition: 300ms ease;
}
.img-holder:hover .default {
transform: translateY(-100%);
}
footer > .footer_center > .mobile > .title {
display: none;
}
.footer_bottom {
background-color: var(--gray-bg-2);
border-bottom: 1px solid var(--line-color);
border-top: 1px solid var(--line-color);
/*padding-bottom: 15px;
padding-top: 15px;*/
}
.footer_bottom > .container > .img > img {
width: 40%;
height: auto;
}
.footer_bottom > .container > .title {
font-size: 12px;
}
.aspect-1-1 {
position: relative;
display: block;
height: 100%;
}
.aspect-1-1::before {
width: 100%;
padding-bottom: 100%;
content: '';
display: block;
}
/* JAVASCRIPT */
#menu-bottom {
display: none;
}
#menu-bottom.active {
display: block;
z-index: 100;
}
#login.active {
visibility: visible;
z-index: 1000;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
.tab-item.active {
color: var(--main-red) !important;
border-bottom: 2px solid var(--main-red) !important;
}
.tab-item {
cursor: pointer;
}
#_back2top.active_1 {
opacity: 1;
pointer-events: auto;
bottom: 80px;
}
#_back2top {
/*background: rgba(0,0,0,0.03);*/
position: fixed;
bottom: 16px;
right: 32px;
width: 40px;
height: 40px;
border-radius: 10%;
display: flex;
align-items: center;
justify-content: center;
font-size: 66px;
color: #3a53a4;
opacity: 0;
transition: ease .2s;
pointer-events: none;
border: 1px solid var(--line-color);
z-index:9999;
}
.suggest-search {
position: absolute;
/*top: 11%;*/
width: fit-content;
background-color: #fff;
z-index: 999;
box-shadow: 0 3px 8px hsl(240, 100%, 1%);
/*border: 1px solid rgba(0,0,0,.1);*/
font-size: 13px;
color: var(--dark);
}
.suggest-search > ul {
list-style: none;
padding-left: 0;
margin:0;
}
.suggest-search > ul > li > a:hover {
background-color: gainsboro;
}
.suggest-search > ul > li > a {
padding: 8px 10px;
width: 100%;
display: block;
position: relative;
text-decoration: none;
cursor: pointer;
color: inherit;
font-style: normal;
font-stretch: normal;
letter-spacing: normal;
}
.suggest-search > ul > li > a> div>mark {
padding:0 !important;
}
.video-js .vjs-control-bar {
font-size: 14px !important;
}
/*Tab Live */
.tab-content {
display: none;
background: #ededed;
}
.current {
display: inherit;
}
.openApp {
display: none;
}
/*Logo*/
.logo-HN{
width: 10%;
}
.text_logo {
margin-bottom: 0px;
align-items: center;
display: flex;
padding-left: 6px;
}
.text_logo > a {
color: #99213B;
font-size: 20px;
font-weight: 400;
font-family: 'svn-gilroy bold';
}
/* Responsive */
@media only screen and (min-device-width: 1200px) and (max-device-width: 1412px) {
/* MENU */
.menu > .nav > .nav-item > .nav-link {
border-right: 0.3px solid var(--line-color);
height: 100%;
padding: 0 0.58rem !important;
}
footer > .menu > .nav > .nav-item > .nav-link {
border-right: 0.3px solid var(--line-color);
height: 100%;
padding: 0 0.96rem !important;
}
}
@media only screen and (min-device-width: 990px) {
.modal-dialog {
max-width: 55%;
}
}
/*Update SEO*/
.highlight_live {
color: red;
}
.icon_setStyle {
display: flex
}
.style-heightAuto {
height: auto !important
}
.margin-left-8 {
margin-left: 8px
}
.margin-bottom-20 {
margin-bottom: 20px;
}
.webkit-inline-box {
display: -webkit-inline-box;
}
.webkit-line-clamp-2 {
-webkit-line-clamp: 2 !important;
margin-bottom: 0px !important;
}
.news-img-box-postcast {
width: 30% !important;
height: 100%;
}
#live {
width: 100% !important;
}
.live-block-bottom > .next-show > a > p {
color: #00000099;
font-family: var(--roboto-font);
}
.live-block-bottom > .next-show > a > p > .fa-calendar-days {
margin-right: 10px;
opacity: 60%;
}
#installApp {
padding-left: 0px;
}
#_back2top > img {
width: 45%;
opacity: 35%;
}
.installApp > .text-center > img {
color: transparent;
}
.weather > div {
width: 5%
}
.weather_mobile {
width: 53%;
}
.weather_mobile > .img-box{
width:10%;
}
.weather_mobile > .img-box > img {
width: 100%;
}
.logo-HN > img {
width: 100%
}
.container > .footer_left > img {
width: 39%;
margin-top: -15px !important;
margin-bottom: 5px
}
.container > .footer_left > p {
font-size: 16px;
opacity: 60%;
font-family: Barlow Semi Condensed
}
.container > .footer_right > p {
font-size: 16px;
opacity: 60%;
font-family: Barlow Semi Condensed
}
.container > .footer_right > div {
display: flex;
padding-bottom: 8px
}
.container > .footer_right > div > .title > .img-wrapper > .holder-fb {
height: 28px;
width: 24px;
}
.container > .footer_right > div > .title > .img-wrapper > .holder-fb > .default > .holder-fb-default {
opacity: 32%
}
.container > .footer_right > div > .title > .img-wrapper > .holder-fb > .default > a > .holder-fb-hover {
width: 100%
}
.container > .footer_right > div > .ite_iconYou {
margin-left: 25px
}
.container > .footer_right > div > .ite_iconYou > .img-wrapper > .holder-youtube {
height: 26px;
width: 24px;
}
.container > .footer_right > div > .ite_iconYou > .img-wrapper > .holder-youtube > .default > .holder-youtube-default {
opacity: 32%;
width: 100%
}
.container > .footer_right > div > .ite_iconYou > .img-wrapper > .holder-youtube > .default > a > .holder-youtube-default {
width: 100%
}