﻿.blog_advHome {overflow: hidden;margin-bottom: 30px}
.blog_home {width: calc(75% - 15px);float: left}
.banner_blog {width: calc(25% - 15px);float: right}

.list_blog .type0 {overflow: hidden;border-bottom: 1px solid #ececec;margin-bottom: 20px;padding-bottom: 20px;position: relative}
.list_blog .type0:before {content: "";display: block;width: 1px;height: 100%;position: absolute;top: 0;left: calc((100% - 60px)*2/3 + 45px);background-color: #ececec}
.list_blog .type0 .item:first-child {width: calc((100% - 60px)*2/3 + 30px);float: left}
.list_blog .type0 .item:nth-child(2) {width: calc((100% - 60px)/3);float: right}
.list_blog .type0 .item:nth-child(2) .desc {max-height: 144px}

.list_blog .type1 {overflow: hidden}
.list_blog .type1 .item {width: calc((100% - 60px)/3);float: left;margin: 0 0 30px 30px}
.list_blog .type1 .item:nth-child(3n+1) {clear: both;margin-left: 0}
.list_blog .title {display: block;font-weight: bold;margin-bottom: 5px}
.list_blog .desc {line-height: 24px;margin-bottom: 10px;max-height: 72px;overflow: hidden}
.list_blog .date {color: #999;font-size: 14px}

.dk-header-navigation .navbar-collapse {display: block}
.dk-header-navigation .navbar-collapse .nav-item {margin-right: 30px;float: left}


.cb {clear: both}
.bao_tt {text-align: center;margin-bottom: 30px}
.bao_tt .title {display: inline-block;color: var(--bs-primary);font-weight: bold;font-size: 30px}
.container {max-width: 1200px;margin: 0 auto}
.page_dh.container {max-width: 1200px}
.dangNhap {max-width: 600px;box-sizing: border-box;border-radius: 20px;padding: 20px 50px 40px 50px;box-shadow: 0 0 20px rgba(0,0,0,0.1);margin: 80px auto}
.dangKy {max-width: 600px;box-sizing: border-box;border-radius: 20px;padding: 20px 50px 40px 50px;margin-bottom: 50px;box-shadow: 0 0 20px rgba(0,0,0,0.1);margin: 80px auto}
.descTK {text-align: center;margin-top: 10px}
.descTK a {text-decoration: none;color: var(--bs-primary);font-weight: bold}
.descTK a:hover {color: var(--bs-second)}
.itemTK {margin-bottom: 30px}
.itemTK b {margin-bottom: 8px;display: block}
.itemTK input {display: block;width: 100%;height: 40px;box-sizing: border-box;padding: 0 12px;outline: none;border: 1px solid #ddd;color: #000;border-radius: 5px}
.btnTK {text-align: center;clear: both}
.btnTK a, .btnSave {display: block;text-decoration: none;color: white;text-transform: uppercase;padding: 0 60px;font-weight: bold;line-height: 44px;border-radius: 5px;background-color: var(--bs-primary)}
.btnTK a:hover, .btnSave:hover {background-color: var(--bs-second)}
.quenMK {text-align: center;margin-top: 30px}
.quenMK a {text-decoration: none;color: var(--bs-primary);line-height: 22px;font-weight: bold}
.quenMK a:hover {color: var(--bs-second)}
.dangKy .itemTK {margin-bottom: 30px}
.dangKy .itemTK:nth-child(3) {width: calc(50% - 5px);float: left}
.dangKy .itemTK:nth-child(4) {width: calc(50% - 5px);float: right}
.dangKy .itemTK:nth-child(5) {clear: both}
#qmkForm {display: none}
#dNhap_dKy .logInMXH {text-align: center;padding-top: 20px}
#dNhap_dKy .logInMXH a {display:inline-block;background-color: var(--bs-primary);color: white;line-height: 40px;margin-top: 10px;border-radius: 20px;font-weight: bold;padding: 0 50px;text-decoration: none}
#dNhap_dKy .logInMXH a i {margin-right: 5px}
#dNhap_dKy .logInMXH a:hover {background-color: var(--bs-second)}
#dNhap_dKy .logInMXH a:hover i {color: white}

#formAccount:after {content: ""date(format);display: block;clear: both}
#formAccount .accIMG .imgc {border-radius: 50%;overflow: hidden;margin-bottom: 10px;background: url(images/avarta.png) no-repeat center;border-radius: 50%;overflow: hidden;width: 100px;float: left;border: 2px solid white;box-shadow: 0 0 10px rgba(0,0,0,0.3);height: 100px;position: relative}
#formAccount .accIMG .imgc img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover}
#formAccount .accIMG label {float: left;width: 200px;clear: both;margin-bottom: 20px;display: none}
#formAccount .accIMG .tt_account {width: calc(100% - 120px);float: right;padding-top: 20px}
#formAccount .accIMG .tt_account .title {font-weight: bold;margin-bottom: 5px}
#formAccount .accIMG label input {display: none}
#formAccount .accIMG label i {margin-right: 5px}
#formAccount .accIMG label:hover {color: var(--bs-primary);cursor: pointer}
#formAccount .accInfo {clear: both}
#formAccount .accInfo .item {overflow: hidden;margin-bottom: 5px}
#formAccount .accInfo b {width: 150px;float: left;height: 40px;background-color: #eaeaea;line-height: 40px;padding-left: 15px;box-sizing: border-box;font-weight: bold}
#formAccount .accInfo .item div {width: calc(100% - 150px);float: right;height: 40px;border: 1px solid #e0e0e0;border-left: none;box-sizing: border-box;position: relative}
#formAccount .accInfo span {display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: white;padding: 0 10px;line-height: 38px;box-sizing: border-box}
#formAccount .accInfo input, #formAccount .accInfo select {width: 100%;height: 38px;border: none;outline: none;padding: 0 20px;box-sizing: border-box;display: block}
#formAccount .accInfo .btnSave {float: right;margin-top: 10px;text-transform: none;padding: 0 40px}
#formAccount .accInfo .btnSave:hover {color: white;border-color: var(--bs-second)}

#formAccount #ChangePassForm.accInfo .item b {width: 200px}
#formAccount #ChangePassForm.accInfo .item div {width: calc(100% - 200px)}

.infoAccount {background-color: white;padding: 20px 30px 30px 30px;border-radius: 8px;overflow: hidden}
.infoAccount .tt_other {margin-bottom: 20px}
.infoAccount .tt_other .title {font-size: 18px;font-weight: bold;text-transform: uppercase;color: var(--bs-primary)}
.menuAccount .titleLeft {font-size: 18px;font-weight: bold;text-transform: uppercase;margin: 10px 0 20px 0;text-align: center;color: var(--bs-primary)}
.cateLeft a {display: block;text-decoration: none;color: #000;font-weight: bold;padding: 8px 0;border-bottom: 1px solid #ececec}
.cateLeft a:last-child {border-bottom: none}
.cateLeft a i {width: 20px;color: var(--bs-primary)}
.cateLeft a.active, .cateLeft a:hover {color: var(--bs-primary)}
.infoAccount .editInfo {float: right;text-decoration: none;color: var(--bs-primary);line-height: 22px;font-weight: bold;margin-top: 15px}
.infoAccount .editInfo i {margin-right: 5px}
.infoAccount .editInfo:hover, .infoAccount .editInfo:hover i {color: var(--bs-second)}
.btn_create {display: block;color: var(--bs-primary);background-color: #dfe1fd;font-weight: bold;font-size: 20px;text-align: center;padding: 7px 10px;border-radius: 5px;margin-bottom: 15px}
.btn_create:hover {color: white;background-color: var(--bs-primary)}
.btn_create:hover i {color: white}

#formAccount #ChangePassForm.accInfo {overflow: hidden}
.page_dh {margin-bottom: 70px}
.tk_left {width: 300px;float: left;box-sizing: border-box;padding: 10px 15px;box-shadow: 0 0 15px rgba(0,0,0,0.1);border-radius: 5px}
.tk_right {width: calc(100% - 330px);float: right;box-shadow: 0 0 15px rgba(0,0,0,0.1);border-radius: 5px}

.dk-header .mnAccount {float: right;position: relative;margin-right: 100px}
.dk-header .mnAccount span {display: block;position: relative;line-height: 45px;color: var(--bs-primary);font-weight: bold}
.dk-header .mnAccount span:after {content: "\f0d7";font: 18px FontAwesome;margin-left: 10px}
.dk-header .mnAccount span i {margin-right: 5px}
.dk-header .mnAccount:hover .subMN {display: block}
.dk-header .mnAccount .subMN {position: absolute;top: 100%;left: 0;border: 1px solid var(--bs-primary);background-color: white;width: 200px;display: none}
.dk-header .mnAccount .subMN a {color: #000;display: block;font-weight: bold;padding: 8px 10px}
.dk-header .mnAccount .subMN a i {width: 18px;text-align: left}
.dk-header .mnAccount .subMN a:hover {color: white;background-color: var(--bs-primary)}
.dk-header .mnAccount .subMN a:hover i {color: white}

.alert {text-align: center}
.nd_alert {max-width: 750px;margin: 70px auto}
.nd_alert .fa-check {width: 120px;height: 120px;border-radius: 50%;background-color: #00ae00;color: white;font-size: 80px;line-height: 120px}
.nd_alert .title {margin: 30px 0 15px 0;font-size: 24px;font-weight: bold;text-transform: uppercase;color: var(--bs-primary)}
.nd_alert .desc {margin-bottom: 20px}
.nd_alert .desc a {color: red;font-weight: bold}
.nd_alert .desc a:hover {color: var(--bs-primary)}
.nd_alert .content {margin-bottom: 20px;line-height: 24px}
.nd_alert .content a {text-decoration: none;font-family: 'FB';color: var(--main-color);font-size: 16px}
.nd_alert .content a:hover {color: var(--other-color)}
.nd_alert .btn a {display: inline-block;text-decoration: none;color: white;text-transform: uppercase;padding: 0 35px;background-color: var(--bs-primary);line-height: 40px;font-weight: bold;border-radius: 5px}
.nd_alert .btn a:hover {background-color: var(--bs-second)}

.bm_left {width: 170px;float: left}
.bm_left b {color: var(--bs-primary)}
.bm_right {width: calc(100% - 200px);float: right}
.bm_right .item {margin-bottom: 20px}
.bm_right .pb5 {padding-bottom: 3px;color: var(--bs-primary)}
.bm_right input[type='text'], .bm_right select, .bm_right textarea {display: block;box-sizing: border-box;padding: 0 10px;border: 1px solid #cecece;border-radius: 5px;height: 40px;width: 100%;outline: none}
.bm_right input[type=checkbox] {width: 20px;height: 20px;margin-right: 5px;display: inline-block;transform: translateY(3px);-webkit-transform: translateY(3px);-moz-transform: translateY(3px)}
.bm_right textarea {height: 120px;resize: none;margin: 0;padding: 5px 10px}
.bm_right .row2Item {overflow: hidden}
.bm_right .row2Item .item {width: calc(50% - 5px);float: left}
.bm_right .row2Item .item:nth-child(2n) {float: right}
.bm_right .btnClick input {display: none}
.bm_right .btnClick label {display: inline-block;color: white;background-color: green;padding: 5px 10px;border-radius: 5px;opacity: 0.7;cursor: pointer}
.bm_right .btnClick label:hover {opacity: 1}
.bm_right .btnClick label i {margin-right: 7px}
.bm_right .btn {text-align: right}
.bm_right .btn a {display: inline-block;margin-left: 5px;color: var(--bs-primary);padding: 0 30px;border: 1px solid var(--bs-primary);border-radius: 5px;font-weight: bold;font-size: 18px;line-height: 38px}
.bm_right .btn a:first-child {padding: 0 15px;color: white;background-color: var(--bs-primary)}
.bm_right .btn a:hover {color: white;background-color: var(--bs-primary)}
.bm_right .btn a:first-child:hover {background-color: var(--bs-second);border-color: var(--bs-second)}
.bm_right .pic img {max-width: 300px;max-height: 300px}

.dk-comp-reads .views {overflow: hidden}
.dk-comp-reads .views .ngayDang {float: left;line-height: 30px}

.info_tk {display: block;overflow: hidden;margin-top: 10px}
.info_tk .img_tk {width: 30px;float: left;height: 30px;border-radius: 50%;position: relative;overflow: hidden}
.info_tk .img_tk img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover}
.info_tk .title_tk {width: calc(100% - 40px);float: right;color: var(--bs-primary);font-size: 15px;line-height: 30px}
.info_tk:hover .title_tk {color: var(--bs-second)}
.dk-comp-reads .info_tk {float: left;white-space: nowrap;margin: 0 5px 0 0}
.dk-comp-reads .info_tk .title_tk {width: auto;margin-left: 5px}
.big-1-3 .dk-item-ver .dk-item-calendar, .dk-item-hoz .dk-item-calendar, .dk-item-hoz.big .dk-item-date {overflow: hidden;color: #999;font-size: 14px;line-height: 30px;padding-top: 5px}
.big-1-3 .dk-item-ver .dk-item-calendar .info_tk, .dk-item-hoz .dk-item-calendar .info_tk, .dk-item-hoz.big .dk-item-date .info_tk {float: left;white-space: nowrap;margin: 0 5px 0 0}
.big-1-3 .dk-item-ver .dk-item-calendar .info_tk .title_tk, .dk-item-hoz .dk-item-calendar .info_tk .title_tk, .dk-item-hoz.big .dk-item-date .title_tk {width: auto;margin-left: 5px}

.info_tacgia {text-align: center;padding-bottom: 20px;border-bottom: 1px solid #ebebeb;margin-bottom: 15px}
.info_tacgia .img_tk {width: 160px;height: 160px;margin: 0 auto 15px auto;border-radius: 50%;overflow: hidden;position: relative;border: 5px solid white;box-shadow: 0 0 3px rgba(0,0,0,0.5)}
.info_tacgia .img_tk img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover}
.info_tacgia .title_tk {font-weight: bold}
.dk-item-date .info_tk {float: left}
.dk-item-date .info_tk .title_tk {width: auto;margin-left: 10px}
.dk-item-date .date {padding-top: 15px;display: inline-block;margin-left: 20px}
.one-big .dk-item-hoz:not(:nth-child(1)) {max-height: none}
.dk-item-hoz .dk-item-title {min-height: 0}

.commentBlog {margin: 20px 0}
.commentBlog .tt_form {margin-bottom: 10px;color: var(--bs-primary);font-size: 20px}
.commentBlog .alertLogin {margin: 0 auto 30px auto;text-align: center;color: red}
.nd_form {overflow: hidden;margin-bottom: 20px}
.nd_form input {width: calc(50% - 5px);height: 40px;border: 1px solid #cecece;border-radius: 5px;padding: 0 10px;float: left;margin-bottom: 10px;outline: none}
.nd_form input:nth-child(2n) {float: right}
.nd_form textarea {padding: 5px 10px;border: 1px solid #cecece;border-radius: 5px;height: 100px;width: 100%;display: block;margin: 0 0 10px 0;resize: none;outline: none}
.nd_form a {float: right;font-weight: bold;padding: 0 20px;border-radius: 5px;background-color: var(--bs-primary);color: white;line-height: 40px}
.nd_form a:hover {background-color: var(--bs-second)}

.list_cm .item_cm {padding-bottom: 10px;overflow: hidden}
.list_cm .item_reply .item_cm {border-bottom: none;padding: 0 0 0 20px;border-left: 1px solid #cecece}
.list_cm .item_reply .item_cm:last-child .btn_date {margin-bottom: 0}
.list_cm .title {font-weight: bold;color: var(--bs-primary)}
.list_cm .content {margin: 7px 0}
.list_cm .btn_date {margin-bottom: 10px;border-bottom: 1px solid #cecece;padding-bottom: 8px;overflow: hidden}
.list_cm .btn_date a {color: #666;font-weight: bold}
.list_cm .btn_date a:hover, .list_cm .btn_date a:hover i {color: var(--bs-second)}
.list_cm .btn_date span {float: right;color: #999}
#replyForm {margin-top: 10px}
.list_bl .item_bl {overflow: hidden;margin-bottom: 15px;padding-bottom: 10px}
.list_bl .item_bl .left {width: 40px;float: left}
.list_bl .item_bl .left .fa {font-size: 24px;color: var(--bs-primary)}
.list_bl .item_bl .right {width: calc(100% - 40px);float: right}
.list_bl .item_bl .content {line-height: 24px;margin-bottom: 8px}
.list_bl .item_bl .link a {color: var(--bs-primary);text-decoration: underline}
.list_bl .item_bl .link a:hover {color: var(--bs-second)}
.list_bl .item_bl .date {color: #999;padding-top: 5px;font-size: 15px}

.dk-detail-content-info .text-\[\#2D3091\] span {color: #000;font-weight: normal}

.btn_status span {font-weight: bold;color: red;margin-right: 20px}
.btn_status a {display: inline-block;color: white;background-color: var(--bs-primary);border-radius: 5px;width: 30px;height: 26px;text-align: center;border: 1px solid var(--bs-primary);line-height: 22px}
.btn_status a:hover {background-color: white}

@media(min-width: 1201px){
    .dk-header {top: -112px}
}
@media(max-width: 1024px){
    .blog_home, .banner_blog {width: 100%}
    .banner_blog .mb-5 {width: calc(50% - 15px);float: left}
    .banner_blog .mb-5:nth-child(2n) {float: right}
    .dk-header .mnAccount {float: none;margin: 0 15px}
    .dk-header .mnAccount .subMN {position: static;width: auto}
}
@media(max-width: 767px){
    .list_blog .type0 {border-bottom: none;overflow: visible}
    .list_blog .type0:before {display: none}
    .list_blog .type0 .item:first-child {width: 100%;margin: 0 0 30px 0}
    .list_blog .type0 .item:nth-child(2) {width: calc(50% - 10px);float: left;margin: 0 0 30px 0}
    .list_blog .type0 .item:nth-child(2) .desc {max-height: 72px}

    .list_blog .type1 {overflow: visible}
    .list_blog .type1 .item {width: calc(50% - 10px);float: left;margin: 0 0 30px 20px}
    .list_blog .type1 .item:nth-child(2n+1) {clear: none;margin-left: 20px}
    .list_blog .type1 .item:nth-child(2n) {clear: both;margin-left: 0}

    .nd_form input {width: 100%}
}

.dk-header-navigation .navbar-collapse {padding-right: 25px;}

@media (min-width: 1200px) {
    .dk-header .mnAccount span k {display: inline-block; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; margin-top: 11px;}
}