﻿@font-face {
    font-family: 'Mulish';
    src: url('../css/font/Mulish-Regular.eot'); /* IE9 Compat Modes */
    src: url('../css/font/Mulish-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../css/font/Mulish-Regular.woff') format('woff'), /* Modern Browsers */
    url('../css/font/Mulish-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../css/font/Mulish-Regular.svg#Mulish-Regular') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'Mulish-Bold';
    src: url('../css/font/Mulish-Bold.eot'); /* IE9 Compat Modes */
    src: url('../css/font/Mulish-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../css/font/Mulish-Bold.woff') format('woff'), /* Modern Browsers */
    url('../css/font/Mulish-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../css/font/Mulish-Bold.svg#Mulish-Bold') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'Mulish-ExtraBold';
    src: url('../css/font/Mulish-ExtraBold.eot'); /* IE9 Compat Modes */
    src: url('../css/font/Mulish-ExtraBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../css/font/Mulish-ExtraBold.woff') format('woff'), /* Modern Browsers */
    url('../css/font/Mulish-ExtraBold.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../css/font/Mulish-ExtraBold.svg#Mulish-ExtraBold') format('svg'); /* Legacy iOS */
}
@font-face {
    font-family: 'PlayfairDisplay-Bold';
    src: url('../css/font/PlayfairDisplay-Bold.eot'); /* IE9 Compat Modes */
    src: url('../css/font/PlayfairDisplay-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../css/font/PlayfairDisplay-Bold.woff') format('woff'), /* Modern Browsers */
    url('../css/font/PlayfairDisplay-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../css/font/PlayfairDisplay-Bold.svg#PlayfairDisplay-Bold') format('svg'); /* Legacy iOS */
}

:root {
    --main-color: #006d6a;
    --other-color: #071e14;
    --hover-color: #ffc431;
}

.imgc, .imgc0{position:relative;z-index:1;display: block}
.imgc:before, .imgc0:before{content:"";display:block;padding-bottom: 66.66%}
.imgc img {object-fit: cover;width: 100%;height: 100%;position: absolute;top: 0;left: 0;display: block}
.imgc0 img {width: 100%;height: 100%;position: absolute;object-fit: scale-down;display: block;top: 0;left: 0}
.imgc iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%}

.slick-arrow {border: none;outline: none;cursor: pointer;position: absolute;z-index: 3;box-sizing: border-box;width: 40px;height: 40px;left: 10px;top: calc(50% - 20px);background-color: transparent}
.slick-next {left: auto;right: 10px}
.slick-arrow:hover:after {color: var(--main-color) !important}
.slick-prev:after {content: "\f104";font: 36px FontAwesome;color: #000 !important}
.slick-next:after {content: "\f105";font: 36px FontAwesome;color: #000 !important}
.slick-list * {outline: none}
.slick-list {overflow: hidden}
.slick-slider {-webkit-user-select: text;-moz-user-select: text;-ms-user-select: text;user-select: text;}
.slick-dots {position: absolute;left: 0;bottom: 15px;padding: 0;margin: 0;text-align: center;width: 100%;z-index: 5}
.slick-dots li {display: inline-block;margin: 0 4px}
.slick-dots button {font-size: 0;width: 11px;height: 11px;background: none;border: 1px solid white;border-radius: 50%;margin: 0;padding: 0}
.slick-dots .slick-active button {border-radius: 0;background-color: var(--main-color);border-color: var(--main-color);width: 30px;border-radius: 6px}
.reset {display: inherit;font-size: inherit;margin: 0;font-family: inherit;padding: 0;line-height: inherit;font-weight: inherit}
.cb {clear: both}
.dn {display: none !important}
body {padding: 0;margin: 0;background-color: white;font: 16px 'Mulish';color: #000}
.container {width: calc(100% - 100px);max-width: 1560px;min-width: 1200px;margin: 0 auto}
#mainContent {overflow: hidden}

#header {background-color: white;padding-top: 70px}
#header .top {position: fixed;top: 0;left: 0;width: 100%;padding: 5px 0;background: linear-gradient(to right, var(--other-color), var(--main-color));z-index: 10}
#header .top:after {content: "";display: block;clear: both}
#header .top .container {position: relative;z-index: 2}
#header .mn_left, #header .mn_right {float: left;padding: 0;margin: 20px 0 0 0}
#header .mn_right {float: right;margin-right: 100px}
#header .mn_left li, #header .mn_right li {list-style: none;display: block;float: left;margin-right: 30px}
#header .mn_left li:last-child, #header .mn_right li:last-child {margin-right: 0}
#header .mn_left a, #header .mn_right a {display: block;text-decoration: none;font-family: 'Mulish-Bold';line-height: 22px;color: white}

#header .mn_left a:hover, #header .mn_right a:hover {color: var(--hover-color)}
#header .logo {text-align: center}
#header .logo .imgc0 {width: 147px;display: inline-block}
#header .logo .imgc0:before {padding-bottom: 57px}
#header .lang {width: 60px;position: absolute;top: 18px;right: 0;}
#header .lang:after {content: "\f107";font: 26px 'FontAwesome';color: white;position: absolute;top: 0;right: 0}
#header .lang.active:after {content: "\f106"}
#header .lang .imgc0 {width: 31px;height: 22px}
#header .sub_lang {position: absolute;top: calc(100% + 5px);left: 0;display: none;z-index: 3}
#header .sub_lang .imgc0 {margin: 5px 0;display: block}
#header .bot {padding: 10px 0 20px 0}
#header .bot .container {display: grid;grid-template-columns: 200px auto 200px}
#header .category, .slide_menu .category {color: var(--main-color);position: relative;z-index: 4;float: left}
#header .bot .category {margin-top: 18px}
#header.header_home .bot .category {margin-top: 0}
.slide_menu .category {color: white}
#header .sub_cate, .slide_menu .sub_cate {position: absolute;top: calc(100% + 16px);width: 280px;left: 0;background-color: white;box-shadow: 0 2px 5px rgba(0,0,0,0.2);padding: 0;margin: 0;display: none}
#header .info_noLogin .sub_cate, .slide_menu .sub_cate {left: auto;right: 0}
#header .category span {background: linear-gradient(to right, var(--other-color), var(--main-color));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;display: inline-block;font-size: 20px;cursor: pointer}
#header .category span:before, .slide_menu .category span:before {content: "\f0c9";width: 20px;font: 20px 'FontAwesome';color: var(--other-color);display: inline-block}
.slide_menu .category span:before {color: white}
#header .category span.active:before, .slide_menu .category span.active:before {content: "\f00d"}
#header .sub_cate li, .slide_menu .sub_cate li {display: block;list-style: none;padding: 15px 30px}
#header .sub_cate a, .slide_menu .sub_cate a {display: block;text-decoration: none;color: #000;font: 18px 'Mulish-Bold';line-height: 24px}
#header .sub_cate a:hover, .slide_menu .sub_cate a:hover {color: var(--main-color)}
#header .account {float: right;position: relative;z-index: 10;order: 3}
#header .account .btn_acc {background: linear-gradient(to right, var(--other-color), var(--main-color));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;display: inline-block;text-decoration: none;font-size: 20px;line-height: 30px}
#header .big_text {font: 64px 'PlayfairDisplay-Bold';text-align: center;text-indent: 42px}
#header .big_text span {display: inline-block;background: linear-gradient(to right, var(--other-color), var(--main-color));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent}

#header.header_home {padding-top: 71px}
#header.header_home .top {background: white}
#header.header_home.shadow .top {box-shadow: 0 2px 5px rgba(0,0,0,0.1)}
#header.header_home .bot {display: none}
#header.header_home .bot .container {border-top: 1px solid var(--main-color);padding: 35px 0 20px 0}
#header.header_home .lang:after {color: var(--main-color)}
#header.header_home .mn_left a, #header.header_home .mn_right a {display: block;text-decoration: none;background: linear-gradient(to right, var(--other-color), var(--main-color));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;font-family: 'Mulish-Bold';line-height: 22px}
#header.header_home .mn_left a:hover, #header.header_home .mn_right a:hover {background: var(--main-color);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent}
#header.header_home .big_text {font-size: 36px;text-indent: 45px;transform: translateY(-10px);-webkit-transform: translateY(-10px);-moz-transform: translateY(-10px)}

.slide_menu {position: relative;z-index: 3 !important;margin-bottom: 50px}
.slide_menu .slick-arrow:after {color: white !important}
.slide_menu .slick-arrow:hover:after {color: var(--main-color) !important}
.slide_home .imgc:before {padding-bottom: 38.541666666%}

.info_noLogin {position: absolute;left: 0;bottom: 50px;width: 100%;z-index: 3}
.info_noLogin > .container {display: grid;grid-template-columns: 200px auto 200px}
.info_noLogin .bot_menu {border-top: 1px solid white;border-bottom: 1px solid white;padding: 18px 0 15px 0;clear: both}
.info_noLogin .bot_menu .container {display: flex}
.info_noLogin .bot_menu .mainMN {display: flex;padding: 0;margin: 0;width: 100%;margin-right: 50px;justify-content: space-between}
.info_noLogin .bot_menu .mainMN li {list-style: none;display: block}
.info_noLogin .bot_menu .mainMN a {display: block;text-decoration: none;color: white;font: 18px 'Mulish-Bold';line-height: 22px;padding-bottom: 3px;border-bottom: 1px solid transparent}
.info_noLogin .bot_menu .mainMN a:hover {border-bottom-color: white}
.info_noLogin .date {float: left;color: white;font-size: 20px;line-height: 24px;margin-top: 10px;white-space: nowrap}
.info_noLogin .wearther {position: relative}
.info_noLogin .wearther > div > a {opacity: 0}
.info_noLogin .wearther .ww_source {display: none !important}
.info_noLogin .wearther .current-temp {width: 70px;font-size: 30px !important}
.info_noLogin .wearther .location {font-size: 20px}
.slide_menu .info_noLogin #widget-weather .current-city strong, .slide_menu .info_noLogin #widget-weather .current-city span {
    color: white
}

.search {margin: 0 auto;border: 1px solid transparent;overflow: hidden;width: 90%;max-width: 800px;height: 50px}
.search a {float: right;width: 60px;height: 50px;text-align: center;text-decoration: none;color: #000}
.search a i {font-size: 20px;line-height: 50px}
.search input {background-color: transparent;padding: 0 15px;color: #000;width: calc(100% - 60px);height: 50px;border: none;outline: none;display: none;box-sizing: border-box;float: left;font: 20px Mulish}
.search.active {border: 1px solid var(--main-color);background-color: white}
.search.active a {color: var(--main-color)}
#header .bot .search, #header .bot .search input, #header .bot .search a {height: 60px;line-height: 60px}
#header .bot .search:not(.s_search) {border-color: var(--main-color)}
#header .bot .search input {display: block !important}
.info_noLogin .search {margin-bottom: 10px}
.info_noLogin .search a {color: white}
.info_noLogin .search.active a {color: var(--main-color)}
#header .info_noLogin {position: static;bottom: 0;padding-top: 10px}
#header .info_noLogin .container {display: flex}
#header .info_noLogin > .container {display: grid;grid-template-columns: 250px auto 250px}
#header .info_noLogin .date, #header .info_noLogin .wearther, #header .info_noLogin .bot_menu a, #header .info_noLogin .search a {color: #000}
#header .info_noLogin .bot_menu li {position: relative}
#header .info_noLogin .bot_menu .mainMN li:hover:before, #header .info_noLogin .bot_menu .mainMN li.active:before {content: "";display: block;width: 100%;height: 5px;position: absolute;left: 0;top: calc(100% + 13px);background-color: var(--hover-color)}
#header .info_noLogin .bot_menu li:hover > a, #header .info_noLogin .bot_menu li.active > a {background: linear-gradient(to right, var(--other-color), var(--main-color));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent}
#header .info_noLogin .bot_menu li .fa-home {font-size: 21px}
#header .info_noLogin .bot_menu {border-color: var(--main-color);margin-bottom: 40px}
#header .info_noLogin .bot_menu .container {display: flex}

.money {padding: 0;/*background-color: color-mix(in srgb,var(--main-color) 7%, transparent);*/font-size: 18px;line-height: 24px}
.money span, .money a {display: inline-block;text-decoration: none;margin-right: 30px}
.money b {font-family: 'Mulish-Bold'}

.col_left {width: calc(100% - 440px);float: left}
.col_right {width: 364px;float: right}

.cate_Title, .big_Title {position: relative;margin-bottom: 30px}
.cate_Title:before, .big_Title:before {content: "";display: block;width: 100%;height: 1px;background: linear-gradient(to right, var(--other-color), var(--main-color));position: absolute;left: 0;bottom: 9px}
.cate_Title .reset {padding-right: 30px;background-color: white;display: inline-block;position: relative;z-index: 2}
.cate_Title a, .cate_Title span {display: inline-block;font-size: 22px;line-height: 30px;background: linear-gradient(to right, var(--other-color), var(--main-color));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;text-decoration: none}
.cate_Title a:hover {background: var(--main-color);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent}
.big_Title {text-align: center}
.big_Title.typeNews {text-align: left}
.big_Title .reset {padding: 0 40px;background-color: white;position: relative;z-index: 2;display: inline-block;min-width: 240px;text-align: center}
.big_Title.typeNews .reset {margin-left: calc((100% - 80px)/3);text-align: left;min-width: 0}
.big_Title span, .big_Title a {display: inline-block;text-decoration: none;font: 35px 'Mulish-ExtraBold';line-height: 45px;background: linear-gradient(to right, var(--other-color), var(--main-color));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent}


.newsHome {margin-bottom: 60px}
.newsHome .cate_Title, .videoHome .cate_Title, .libraryHome .cate_Title {width: calc((100% - 80px)/3);margin-bottom: 0}

.list_newsHome {overflow: hidden;border-bottom: 1px solid #d9d9d9}
.list_newsHome .item {width: calc((100% - 80px)/3);float: left;margin: 0 0 40px 40px}
.list_newsHome .item:first-child {width: 100%;margin-left: 0;overflow: hidden;display: flex;flex-direction: row-reverse}
.list_newsHome .item:nth-child(3n+2) {margin-left: 0}
.list_newsHome .title {color: #000;text-decoration: none;font: 24px 'Mulish-Bold';line-height: 34px;max-height: 102px;overflow: hidden;display: block;margin: 20px 0}
.list_newsHome .title:hover {color: var(--main-color)}
.list_newsHome .desc {font-size: 20px;line-height: 30px;max-height: 60px;overflow: hidden;margin-bottom: 20px}
.date_view {overflow: hidden;font: 16px 'Mulish-Bold'}
.date_view .date {float: right}
.list_newsHome .item:first-child .info {width: calc((100% - 80px)/3);margin-right: 40px;position: relative;border-bottom: 1px solid #d9d9d9}
.list_newsHome .item:first-child .imgc {width: calc((100% - 80px)*2/3 + 40px)}
.list_newsHome .item:first-child .title {font: 35px 'Mulish-ExtraBold';line-height: 45px;background: linear-gradient(to right, var(--other-color), var(--main-color));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;max-height: none;margin: 40px 0 20px 0}
.list_newsHome .item:first-child .desc {max-height: 90px}
.list_newsHome .item:first-child .title:hover, .slide_videoHome .title:hover {background: var(--main-color);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent}
.list_newsHome .item:first-child .date_view {position: absolute;left: 0;bottom: 30px;width: 100%}

.slide_videoHome {margin-bottom: 80px}
.slide_videoHome .item {display: flex;flex-direction: row-reverse}
.slide_videoHome .info {width: calc((100% - 80px)/3);margin-right: 40px;border-bottom: 1px solid #d9d9d9}
.slide_videoHome .title {font: 35px 'Mulish-ExtraBold';line-height: 45px;background: linear-gradient(to right, var(--other-color), var(--main-color));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;margin: 40px 0 20px 0;display: block}
.slide_videoHome .desc {font-size: 20px;line-height: 30px;max-height: 90px;overflow: hidden;margin-bottom: 20px}
.slide_videoHome .imgc {width: calc((100% - 80px)*2/3 + 40px)}
.slide_videoHome .slick-prev, .slide_library .slick-prev {left: calc((100% - 80px)/6 - 80px);top: auto;bottom: 20px}
.slide_videoHome .slick-next, .slide_library .slick-next {left: calc((100% - 80px)/6 + 40px);top: auto;bottom: 20px}

.list_productHome {background-color: #c3efcc;overflow: hidden;padding: 10px;margin-bottom: 80px}
.list_productHome .item {width: 35%;float: right;padding-right: 40px;box-sizing: border-box}
.list_productHome .item:first-child {width: 65%;overflow: hidden;float: left}
.list_productHome .item:first-child .imgc {width: calc(100% - 51.112% - 40px);float: left}
.list_productHome .item:first-child .info {width: 51.112%;float: right}
.list_productHome .title {display: block;text-decoration: none;color: #000;font: 24px 'Mulish-Bold';line-height: 34px;max-height: 102px;overflow: hidden;margin-bottom: 10px}
.list_productHome .title:hover {color: var(--main-color)}
.list_productHome .date_view {padding-top: 15px;border-top: 1px solid var(--main-color)}

.libraryHome {position: relative;z-index: 2;padding-bottom: 50px;border-bottom: 1px solid #d9d9d9;margin-bottom: 50px}
.tab_library {position: absolute;left: 0;top: 80px;z-index: 3}
.tab_library a {display: inline-block;padding-bottom: 10px;border-bottom: 3px solid transparent;text-decoration: none;color: #000}
.tab_library a i {margin-right: 5px}
.tab_library a.active {color: var(--main-color);border-bottom-color: var(--main-color)}
.tab_library a:not(:last-child) {margin-right: 50px}
.slide_library {position: absolute;z-index: -1;opacity: 0;top: 0;left: 0;width: 100%}
.slide_library .item {display: flex;flex-direction: row-reverse}
.slide_library .info {width: calc((100% - 80px)/3);margin-right: 40px}
.slide_library .imgc {width: calc((100% - 80px)*2/3 + 40px)}
.slide_library .title {font: 35px 'Mulish-ExtraBold';text-decoration: none;display: block;line-height: 45px;color: #000;margin: 120px 0 20px 0}
.slide_library .desc {font-size: 18px;line-height: 24px;max-height: 72px;overflow: hidden;margin-block: 30px}
.slide_library .slick-arrow {bottom: 0}
.slide_library .title:hover {color: var(--main-color)}
.content_library .slide_library.active {z-index: 2;opacity: 1;position: relative}
.slide_library .imgc i {position: absolute;width: 70px;height: 70px;border-radius: 50%;background-color: white;text-align: center;font-size: 30px;line-height: 70px;left: calc(50% - 35px);top: calc(50% - 35px);color: var(--main-color)}

.connect {white-space: nowrap}
.connect .imgc0 {width: 34px;height: 34px;display: inline-block;margin-left: 10px;border-radius: 50%;overflow: hidden;z-index: 2}

.menu_footer {text-align: right;margin-bottom: 80px;overflow: hidden}
.menu_footer span {font: 36px 'PlayfairDisplay-Bold';background: linear-gradient(to right, var(--other-color), var(--main-color));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;float: left}
.menu_footer a {display: inline-block;text-decoration: none;color: #000;margin: 0 80px 17px 0;font-size: 20px;line-height: 30px}
.menu_footer a:hover {color: var(--main-color)}

.license {padding: 20px 0;background-color: var(--main-color);color: white;overflow: hidden}
.license .container {display: flex}
.license .container > .imgc0 {width: 125px;height: 39px;float: left}
.license .text {width: calc(100% - 150px);float: right;font-size: 14px;line-height: 24px;padding: 7px 0}
#page_head {position: fixed;z-index: 5;right: 10px;bottom: 170px;width: 50px;height: 50px;text-align: center;border-radius: 50%;background-color: rgba(255,255,255,0.5);text-decoration: none;color: var(--main-color);box-shadow: 0 0 5px 2px white}
#page_head i {font-size: 50px;line-height: 50px}

.list_mostViews {margin-bottom: 60px}
.list_mostViews .item:first-child {padding-top: 0}
.list_mostViews .item {overflow: hidden;padding: 30px 0;border-bottom: 1px solid #d9d9d9}
.list_mostViews .imgc {width: 120px;float: left}
.list_mostViews .title {width: calc(100% - 140px);float: right;text-decoration: none;color: #000;font-family: 'Mulish-Bold';line-height: 24px;max-height: 96px;overflow: hidden}
.list_mostViews .title:hover {color: var(--main-color)}

.list_reels {margin-bottom: 60px}
.list_reels .imgc {margin-bottom: 30px}
.list_reels .imgc:before {padding-bottom: 150%}
.list_reels .imgc .reset {position: absolute;z-index: 2;left: 0;bottom: 0;width: 100%;box-sizing: border-box;padding: 60px 30px 30px 30px;background: linear-gradient(to top, var(--other-color), transparent)}
.list_reels .imgc .title {color: white;text-decoration: none;font: 24px 'Mulish-Bold';line-height: 34px;max-height: 136px;overflow: hidden;display: block}

.list_podcast {margin-bottom: 60px}
.list_podcast .item {padding-bottom: 30px;border-bottom: 1px solid #d9d9d9;margin-bottom: 30px}
.list_podcast .imgc:before {padding-bottom: 100%}
.list_podcast .title {display: block;text-decoration: none;color: #000;font: 24px 'Mulish-Bold';margin: 20px 0}
.list_podcast .title:hover {color: var(--main-color)}
.list_podcast .playMP3 {margin-bottom: 20px}
.list_podcast .playMP3 a {line-height: 24px;text-decoration: none;color: #000}
.list_podcast .playMP3 .fa-play {font-size: 10px;width: 24px;height: 24px;text-align: center;background-color: var(--other-color);color: white;margin-right: 10px;line-height: 24px;border-radius: 50%;transform: translateY(-2px);-webkit-transform: translateY(-2px);-moz-transform: translateY(-2px)}
.list_podcast .playMP3:hover {color: var(--main-color)}
.list_podcast .playMP3:hover .fa-play {background-color: var(--main-color)}
.list_podcast.type1 {overflow: hidden;margin-bottom: 30px}
.list_podcast.type1 .item {width: calc((100% - 80px)/3);float: left;margin: 0 0 50px 40px}
.list_podcast.type1 .item:nth-child(3n+1) {clear: both;margin-left: 0}
.list_podcast.type2 .item {display: flex;padding-bottom: 0;margin-bottom: 60px;border-bottom: none}
.list_podcast.type2 .title {font: 35px 'Mulish-ExtraBold';line-height: 45px;margin-bottom: 40px}
.list_podcast.type2 .imgc {width: calc(50% - 20px);margin-right: 80px}
.list_podcast.type2 .info {width: calc(50% - 60px);display: flex;align-items: center;position: relative}
.list_podcast.type2 .date_view {position: absolute;left: 0;bottom: 0;width: 100%}
.list_podcast.type2 .cate_Title {display: inline-block;padding-right: 80px;margin-bottom: 10px}
.list_podcast.type2 .item:nth-child(2n+1) {flex-direction: row-reverse}
.list_podcast.type2 .item:nth-child(2n+1) .info {margin-right: 80px}
.list_podcast.type2 .item:nth-child(2n+1) .imgc {margin-right: 0}


.list_banner {margin-bottom: 60px}
.list_banner .imgc:before {padding-bottom: 100%}
.list_banner .imgc {margin-bottom: 30px}

.list_readNews {margin-bottom: 60px}
.list_readNews .item {padding: 20px 0 30px 0;border-bottom: 1px solid #d9d9d9}
.list_readNews .item:first-child {padding-top: 0}
.list_readNews .title {display: block;text-decoration: none;color: #000;margin-bottom: 20px;font: 24px 'Mulish-Bold';line-height: 34px}
.list_readNews .title:hover {color: var(--main-color)}
.list_readNews .cate {margin-bottom: 20px}
.list_readNews .cate a {text-decoration: none;color: #000;font-style: italic}
.list_readNews .cate a:hover {color: var(--main-color)}
.list_readNews .desc {font-size: 20px;line-height: 30px;max-height: 60px;overflow: hidden;margin-bottom: 20px}

.list_NewsType1 {margin-bottom: 100px}
.list_NewsType1 .item {display: flex;overflow: hidden;margin-bottom: 60px;flex-direction: row-reverse}
.list_NewsType1 .info {width: calc((100% - 80px)/3);margin-right: 40px;border-bottom: 1px solid #d9d9d9;position: relative}
.list_NewsType1 .imgc {width: calc((100% - 80px)*2/3 + 40px)}
.list_NewsType1 .title {font: 35px 'Mulish-ExtraBold';line-height: 45px;background: linear-gradient(to right, var(--other-color), var(--main-color));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;margin-bottom: 30px;display: block}
.list_NewsType1 .desc {font-size: 18px;line-height: 24px;max-height: 72px;overflow: hidden;margin-block: 20px}
.list_NewsType1 .title:hover {background: var(--main-color);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent}
.list_NewsType1 .date_view {position: absolute;left: 0;bottom: 30px;width: 100%}

.list_NewsType2 {display: flex;margin-bottom: 80px}
.list_NewsType2 .left {width: calc(50% - 30px);margin-right: 60px}
.list_NewsType2 .right {width: calc(50% - 30px)}
.list_NewsType2 .item {border-bottom: 1px solid #d9d9d9;padding-bottom: 30px}
.list_NewsType2 .title {font: 24px 'Mulish-Bold';color: #000;text-decoration: none;line-height: 34px;max-height: 102px;overflow: hidden;display: block}
.list_NewsType2 .title:hover {color: var(--main-color)}
.list_NewsType2 .left .item {min-height: 100%;box-sizing: border-box;position: relative}
.list_NewsType2 .left .title {margin: 15px 0 30px 0}
.list_NewsType2 .left .date_view {position: absolute;left: 0;bottom: 30px;width: 100%}
.list_NewsType2 .right .item {padding-top: 30px;overflow: hidden}
.list_NewsType2 .right .imgc {width: 220px;float: left}
.list_NewsType2 .right .info {width: calc(100% - 250px);float: right}
.list_NewsType2 .right .title {margin-bottom: 20px}
.list_NewsType2 .right .item:first-child {padding-top: 0}

.btn_load_ajax {text-align: center;margin-bottom: 80px}
.btn_load_ajax a {display: inline-block;text-decoration: none;color: var(--main-color);padding: 15px 40px;border: 1px solid var(--main-color);font-size: 22px;line-height: 30px}
.btn_load_ajax a:hover {color: white;background: linear-gradient(to right, var(--other-color), var(--main-color))}

.wrap_detail {padding: 40px 50px;box-shadow: 0 0 10px rgba(0,0,0,0.08);border-radius: 20px;margin: 10px 0 80px 0}
.road {overflow: hidden;margin-bottom: 30px;line-height: 30px}
.road a {text-decoration: none;color: #666;font-size: 20px;line-height: 30px}
.road a:hover {color: var(--main-color)}
.road a:not(:first-child) {margin-left: 10px;color: #000}
.road a:not(:first-child):before {content: "\f105";font: 16px 'FontAwesome';margin-right: 8px}
.road a:not(:first-child):hover {color: var(--main-color)}
.title_detail {font: 30px 'Mulish-ExtraBold';line-height: 40px;margin-bottom: 30px}
.before_content {padding-bottom: 20px;border-bottom: 1px solid #d9d9d9;margin-bottom: 30px;overflow: hidden}
.before_content .view {margin-right: 50px}
.before_content .like_share {float: right}
.before_content .like_share .fb_iframe_widget {float: left;display: block}
.detail_content {font-size: 20px;line-height: 30px;margin-bottom: 80px}
.detail_content img {max-width: 100%;height: auto !important}

.comment_share .cate_Title {width: calc((100% - 80px)/3);float: left}
.comment_share .share_list {float: right;white-space: nowrap;transform: translateY(-10px);-webkit-transform: translateY(-10px);-moz-transform: translateY(-10px);margin-right: 75px}
.comment_share .share_list span {float: left;margin-right: 20px;line-height: 40px}
.form_comment {clear: both;position: relative;margin-bottom: 30px;background-color: #f8f8f8;overflow: hidden;border-radius: 10px 10px 0 10px}
.form_comment textarea {display: block;width: 100%;height: 120px;padding: 10px 20px;font: 16px 'Mulish';color: #000;box-sizing: border-box;border: none;outline: none;resize: none;background: transparent}
.form_comment a {position: absolute;right: 0;bottom: 0;padding: 0 20px;font-family: Mulish-Bold;color: white;text-decoration: none;line-height: 50px;background: linear-gradient(to right, var(--other-color), var(--main-color))}
.form_comment a:hover {background: var(--main-color)}

.comment_list {margin-bottom: 40px}
.comment_list .item {padding-bottom: 15px;margin-bottom: 20px;border-bottom: 1px solid #d9d9d9}
.comment_list .name_date {font-family: Mulish-Bold;margin-bottom: 10px}
.comment_list .name_date span {font-family: Mulish;color: #999}
.comment_list .content {line-height: 24px}

.tags span {display: inline-block;text-transform: uppercase;color: var(--main-color);font-size: 22px;line-height: 34px;margin: 2px 2px 2px 0;background: linear-gradient(to right, var(--other-color), var(--main-color));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent}
.tags a {display: inline-block;text-decoration: none;color: #000;padding: 0 15px;border: 1px solid #d9d9d9;border-radius: 4px;margin: 2px;line-height: 32px}
.tags a:hover {color: white;background: linear-gradient(to right, var(--other-color), var(--main-color))}

.list_other {overflow: hidden;border-bottom: 1px solid #d9d9d9;margin-bottom: 80px}
.list_other .item {width: calc((100% - 80px)/3);float: left;margin: 0 0 40px 40px}
.list_other .item:nth-child(3n+1) {clear: both;margin-left: 0}
.list_other .title {display: block;margin: 20px 0;text-decoration: none;color: #000;font: 24px 'Mulish-Bold';line-height: 34px}
.list_other .title:hover {color: var(--main-color)}
.wrap_podcast {padding: 40px 50px 0 50px;position: relative;margin-top: -60px;z-index: 2;background-color: white}
.desc_cate {text-align: center;margin-bottom: 50px;font-size: 20px;line-height: 30px}

.cmPodcast {max-width: 890px;margin: 0 auto 100px auto}
.banner_podcast {background: url(images/bg_podcast.png) no-repeat right 15px top 15px, linear-gradient(to right, var(--other-color), var(--main-color));padding: 60px 0;overflow: hidden;color: white;margin-bottom: 80px}
.banner_podcast .imgc {width: 450px;float: left}
.banner_podcast .imgc:before {padding-bottom: 100%}
.banner_podcast .info {width: calc(100% - 520px);float: right}
.banner_podcast .road a {color: white;font-size: 20px}
.banner_podcast .road a:hover {color: var(--hover-color)}
.banner_podcast .cate_Title {display: inline-block;padding-right: 100px}
.banner_podcast .cate_Title .reset {background: transparent}
.banner_podcast .cate_Title a, .banner_podcast .cate_Title span {background: transparent;-webkit-background-clip: unset;background-clip: unset;-webkit-text-fill-color: unset;color: var(--hover-color)}
.banner_podcast .cate_Title a:hover {color: white}
.banner_podcast .cate_Title:before {width: 100px;left: auto;right: 0;background: var(--hover-color)}
.banner_podcast .date_view {display: inline-block;margin-top: 20px}
.banner_podcast .date_view .date {margin-left: 80px}
.banner_podcast audio {display: block;width: 100%;margin-bottom: 30px}
.banner_podcast .chanelSocial {float: right}
.banner_podcast .chanelSocial .imgc0 {width: 50px;height: 50px;border: 1px solid var(--main-color);border-radius: 50%;display: inline-block;margin: 0 2px;background-color: color-mix(in srgb, var(--main-color), transparent)}
.banner_podcast .chanelSocial .imgc0 img {width: calc(100% - 16px);height: calc(100% - 16px);left: 8px;top: 8px;}
.banner_podcast .chanelSocial .imgc0:hover {background-color: white}

.list_video {overflow: hidden}
.list_video .item {width: calc(50% - 50px);float: left;margin: 0 0 100px 100px;overflow: hidden;padding-bottom: 30px;border-bottom: 1px solid #d9d9d9}
.list_video .item:nth-child(2n+1) {clear: both;margin-left: 0}
.list_video .title {font: 35px 'Mulish-ExtraBold';text-decoration: none;display: block;line-height: 45px;color: #000;margin: 40px 0}
.list_video .title:hover {color: var(--main-color)}
.list_video .imgc i {position: absolute;width: 70px;height: 70px;border-radius: 50%;background-color: white;text-align: center;font-size: 30px;line-height: 70px;left: calc(50% - 35px);top: calc(50% - 35px);color: var(--main-color)}
.list_video .imgc i.fa-play {text-indent: 4px}
.list_video .imgc:hover i, .slide_library .imgc:hover i {color: white;background: linear-gradient(to right, var(--other-color), var(--main-color));box-shadow: 0 0 15px 2px white}
.list_video .date_view {display: inline-block;font-size: 20px}
.list_video .date_view .date {margin-left: 80px}
.list_video .btn {float: right}
.list_video .btn a {display: inline-block;margin-left: 80px;font-size: 30px;text-decoration: none;color: #000}
.list_video .btn a:first-child {margin-left: 0}
.list_video .btn a:hover {color: var(--main-color)}

.title_Video {position: absolute}
.title_Video i {width: 38px;height: 38px;font-size: 14px;border-radius: 50%;background: linear-gradient(to right, var(--other-color), var(--main-color));color: white;text-align: center;line-height: 38px;margin-right: 10px;text-indent: 2px;display: inline-block;transform: translateY(-5px);-webkit-transform: translateY(-5px);-moz-transform: translateY(-5px)}
.title_Video span {display: inline-block;font-size: 30px;background: linear-gradient(to right, var(--other-color), var(--main-color));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;line-height: 40px}

.slideYoutube {margin-bottom: 50px}
.slideYoutube .iframeVideo {max-width: 890px;margin: 0 auto}
.slideYoutube .iframeVideo:before {padding-bottom: 56.25%}
.slideYoutube .slick-arrow, .slideReels .slick-arrow {border: 1px solid var(--main-color);width: 50px;height: 50px;border-radius: 50%}
.slideYoutube .slick-prev:after, .slideReels .slick-prev:after {content: "\f062";font-size: 18px;line-height: 48px}
.slideYoutube .slick-next:after, .slideReels .slick-next:after {content: "\f063";font-size: 18px;line-height: 48px}
.slideYoutube .slick-prev, .slideReels .slick-prev {left: auto;right: 0;top: calc(50% - 65px)}
.slideYoutube .slick-next, .slideReels .slick-next {top: calc(50% + 15px);right: 0}
.slideYoutube .slick-arrow:hover, .slideReels .slick-arrow:hover {background: linear-gradient(to right, var(--other-color), var(--main-color))}
.slideYoutube .slick-arrow:hover:after, .slideReels .slick-arrow:hover:after {color: white}
.slideYoutube .imgc0 {max-width: 890px;margin: 0 auto}

.list_reelsType1 {overflow: hidden}
.list_reelsType1 .item {width: calc((100% - 120px)/3);float: left;margin: 0 0 80px 60px}
.list_reelsType1 .item:nth-child(3n+1) {clear: both;margin-left: 0}
.list_reelsType1 .imgc {border-radius: 10px;overflow: hidden}
.list_reelsType1 .imgc:before {padding-bottom: 150%}
.list_reelsType1 .title {display: block;text-decoration: none;color: #000;margin: 30px 0;font: 24px 'Mulish-Bold';line-height: 34px}
.list_reelsType1 .title:hover {color: var(--main-color)}

.slideReels .iframeReels {max-width: 460px;border-radius: 10px;overflow: hidden;margin: 0 auto 50px auto}
.slideReels .iframeReels:before {padding-bottom: 150%}

.cate_library {text-align: center;padding: 60px 0 100px 0}
.cate_library a {display: inline-block;text-decoration: none;color: #000;font-size: 30px;padding-bottom: 20px;border-block: 5px solid transparent;margin: 0 70px}
.cate_library a.active {color: var(--main-color);border-bottom-color: var(--main-color)}
.cate_library a i {font-size: 30px;margin-right: 10px}
.cate_library a i.fa-play-circle {font-size: 38px}

.cate_News {padding: 15px 30px;background-color: color-mix(in srgb, var(--main-color) 7%, transparent);margin-bottom: 50px}
.cate_News a, .cate_News span {display: inline-block;background: linear-gradient(to right, var(--other-color), var(--main-color));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;text-decoration: none;font: 24px 'Mulish-ExtraBold' !important;line-height: 40px}
.cate_News a:hover {background: var(--main-color);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent}

#popupLogin {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 11;background-color: rgba(0,0,0,0.7);display: none;align-items: center;justify-content: center}
#popupLogin .content_popup {max-width: 560px;width: calc(100% - 40px);padding: 30px;border-radius: 5px;position: relative;background-color: white;text-align: center;box-sizing: border-box}
#popupLogin .close_popup {position: absolute;top: -20px;right: -20px;width: 40px;height: 40px;background-color: white;border-radius: 50%;text-align: center;cursor: pointer;box-shadow: 0 0 5px var(--main-color)}
#popupLogin .close_popup i {font-size: 20px;line-height: 40px}
#popupLogin .title_popup {display: inline-block;background: linear-gradient(to right, var(--other-color), var(--main-color));-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;font: 22px 'Mulish'}
#popupLogin .desc_popup {text-align: center;padding: 20px 30px;border-top: 1px solid #d9d9d9;margin: 20px -30px 0 -30px}
#popupLogin .item_form {border: 1px solid #cecece;border-radius: 3px;margin-bottom: 15px;overflow: hidden;position: relative}
#popupLogin .item_form input {width: 100%;height: 44px;box-sizing: border-box;padding: 0 10px;font: 16px 'Mulish';color: #000;border: none;outline: none}
#popupLogin .item_form .btnPassword {width: 40px;height: 44px;position: absolute;top: 0;right: 0;text-align: center}
#popupLogin .item_form .btnPassword:before {content: "\f06e";font: 18px 'FontAwesome';line-height: 38px}
#popupLogin .item_form .btnPassword.active:before {content: "\f070"}
#popupLogin .forgotPass {text-align: right}
#popupLogin .forgotPass a {text-decoration: none;color: #999}
#popupLogin .forgotPass a:hover {color: var(--main-color)}
#popupLogin .btn_Popup {margin-top: 20px}
#popupLogin .btn_Popup a {display: block;color: white;text-decoration: none;font: 16px 'Mulish-Bold';line-height: 50px;border-radius: 5px;background-color: var(--main-color)}
#popupLogin .btn_Popup a:hover {color: var(--main-color);background-color: white;box-shadow: 0 0 5px var(--main-color)}
#form_Forgot, #form_Repass {display: none}