/* /App_Themes/hanoi/css/style2.css */
.container {
    min-width: 1200px;
}

#MainContent {
    min-width: 1200px;
}

.bgwhite {
    background: #fff;
}

.width1600 {
    max-width: 1600px;
}

a {
    text-decoration: none !important;
}

.width100 {
    width: 100% !important;
}

.height100 {
    height: 100%;
}

a {
    color: black;
}

    a:hover {
        color: black;
        text-decoration: none;
    }

.lit-ht:after {
    content: ' |';
}

.lit-ht {
    font-size: 13px;
    font-weight: 500;
}

.lit-other {
    font-size: 13px;
    font-weight: 500;
}

@media (min-width: 768px) {
    .search-th {
        width: 200px;
    }
}

@media (min-width: 992px) {
    .search-th {
        width: 212px;
    }
}

@media (min-width: 1200px) {
    .search-th {
        width: 302px;
    }
}

.search-th i {
    position: absolute;
    margin-right: 10px;
    color: #1565C0;
}

.search-th input {
    background: linear-gradient(180deg, #FFFFFF 0%, #F1F1F1 100%);
    border: 1px solid #DDE0E4;
    box-sizing: border-box;
    border-radius: 6px;
    width: 100%;
    height: 32px;
    padding-left: 12px;
    padding-right: 28px;
}

input:focus {
    outline: none;
}

.head-sl {
    height: 40px;
    padding: 2px 0px 2px 0px;
}

.img-bnner {
    object-fit: cover;
    width: 100%;
}

.menu-option {
    height: 42px;
    width: 100%;
    background: #1565C0;
    position: sticky;
    top: 40px;
    z-index: 1000;
}

.menu-list {
    height: 100%;
}

    .menu-list i {
        color: white;
        font-size: 28px;
    }

.margin0 {
    margin: 0px !important;
}

.it-menu a {
    color: white;
    font-family: 'Roboto';
    font-size: 13px;
    text-transform: uppercase;
}

.it-menu {
    margin-left: 20px;
}

.status-line {
    height: 46px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F4F4F4 100%);
    padding-bottom: 2px;
    position: relative;
    box-shadow: 0px 0px 1px;
}

.time-topline {
    font-family: 'Roboto';
    font-size: 12px;
}

.t-hi {
    color: #1565C0;
    font-size: 15px;
    font-family: Roboto, sans-serif;
}

.body-ct {
    background-color: #F5F5F5;
}

.content {
    background-color: white;
    max-width: 1200px;
}

.fit-obj {
    object-fit: cover;
}

.width1200 {
    max-width: 1200px;
}

.ct-inside {
    padding: 20px;
}

.scroll-c {
    position: absolute;
    top: 0;
    display: none;
}

.in-left img {
    width: 125px;
    height: 150px;
    margin-bottom: 20px;
    object-fit: cover;
}

.in-right img {
    margin-bottom: 20px;
}

@media (min-width: 1600px) {
    .scroll-c {
        display: flex;
    }
}

.leftit {
    display: none !important;
}

@media (min-width: 1600px) {
    .leftit {
        display: flex !important;
    }
}

.rightit {
    display: none !important;
}

@media (min-width: 1600px) {
    .rightit {
        display: flex !important;
    }
}

i {
    cursor: pointer;
    user-select: none;
}

.in-left {
    display: none;
    margin-top: 20px;
}

@media (min-width: 1600px) {
    .in-left {
        display: block;
    }
}

.in-right {
    display: none;
    margin-top: 20px;
}

@media (min-width: 1600px) {
    .in-right {
        display: block;
    }
}

@media (min-width: 1600px) {
    .content {
        min-width: 1200px;
    }
}

.lright-it a {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    color: #FFFFFF;
    margin-right: 5px;
}

.navigation {
    background: #ffffff;
    box-shadow: 1px 2px 5px rgb(188,188,188);
    position: absolute;
    overflow: hidden;
    display: none;
}

.padding0 {
    padding: 0px !important;
}

.navigation-hol {
    position: sticky;
    top: 82px;
    z-index: 10000;
}

.tl-cm {
    font-size: 15px;
    font-weight: 600;
}

span {
    font-family: 'Roboto';
}

.r-ctnv {
    margin: 38px;
}

.col-aclose span {
    color: #1565C0;
    font-size: 15px;
    cursor: pointer;
    user-select: none;
}

.col-aclose i {
    color: #1565C0;
    margin-left: 5px;
}

.tit-mn {
    font-size: 15px;
    font-weight: 600;
}

.list-itnv a {
    font-size: 15px;
    font-weight: 400;
    line-height: 19.5px;
}

.v-more {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 130%;
    color: #1565C0;
    cursor: pointer;
    user-select: none;
}

.nv-hr {
    margin-top: 5px !important;
    margin-bottom: 2px !important;
}

.col.lv2-nv {
    margin-top: 49px;
}

.top-title {
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 22px;
    line-height: 130%;
    color: #1565C0;
    margin-top: 21px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.navigation-hol a:hover {
    color: var(--red);
}

.navigation-hol .v-more:hover {
    text-decoration: underline;
    transition: .3s;
}

.hour-zone {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 122.19%;
    display: flex;
    align-items: center;
    color: #6F6F6F;
    padding-bottom: 10px;
    padding-top: 2px;
}

.top-review {
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 130%;
    color: #333333;
    padding-top: 6px;
}

.img-lv2-toppic {
}

.txt-tplv2 {
    font-weight: 700 !important;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    text-align:left !important;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.img-lv2 {
    height: 74px;
    width: 121px;
}

.item-zone {
    padding-bottom: 6px;
    height: 63px;
}

.lv3-title {
}

.ct-hrlv2 {
    margin-top: 0px !important;
    margin-bottom: 8px !important;
}

.title-lv2 {
    height: 60px;
    width: 100%;
    overflow: hidden;
}

.title-lv3 {
    font-size: 13px;
    font-weight: 700 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.bg-cl {
    background-color: #F5F5F5;
}

.b-title {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 30px;
    line-height: 35px;
    display: flex;
    align-items: center;
    color: #1565C0;
    padding-left: 15px;
    border-left-style: outset;
    border-left-color: #1565C0;
    margin-bottom: 0px;
}

.bn2 {
    padding-left: 20px;
    padding-right: 20px;
}

.white-back {
    background: white;
}

.ct-v {
    padding: 5px 0px 34px 20px;
}

.hol-item {
    color: #C4C4C4;
}

.txt-ct {
    padding-left: 15px;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    line-height: 130%;
}

.it-ct {
    position: relative;
    padding: 10px;
    background: #ffffff;
    box-shadow: 0px 0px 0px 1px;
    border-radius: 6px;
    padding-right: 20px;
}

.itclhol {
    padding: 20px 20px 0px 0px;
}

.it-ct:hover {
    background: rgb(247,247,247);
    transition: .3s ease;
}

.ct-inside a:hover {
    text-decoration: underline;
    transition: .3s ease;
}

.spacer {
    display: flex;
    justify-content: space-between;
}

.header-snip {
    background: #004CCB;
}

    .header-snip span, .header-snip i {
        color: white;
    }

.bt-titct {
    font-weight: 400;
    font-size: 19px;
}

.more-ctsn {
    font-size: 13px;
    color: white;
}

.d-grid {
    display: grid;
}

.txt-snipt {
    font-style: normal !important;
    font-weight: 500;
    font-size: 15px !important;
    line-height: 23px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.timesnip {
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 122.19%;
    color: #828282;
    margin-top: 5px;
}

.hov-underline:hover {
    transition: .3s ease;
    text-decoration: underline;
}

.b-title-ev {
    font-size: 30px;
    color: #1565C0;
    border-left-width: 3px;
    padding-left: 15px;
    border-left-style: solid;
}

.gradient-1 {
    background: linear-gradient(180deg, #FFFFFF 0%, #F4F4F4 100%);
}

.r-hol-snip {
    padding-bottom: 15px;
}

.top-lv2-new {
    border: 1px solid #E7E7E7;
}

.titnew-lv2 {
    max-height: 74px;
}

.g-title {
    padding: 10px 15px;
}

.text-more {
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 136.69%;
    text-align: right;
    color: #1565C0;
}

.more-ctsn:hover {
    color: white;
}

.sec-head {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10000;
}

.menu-nav {
    width: 50px;
    transition: .6s ease-in;
}



.hz-v2 {
    padding-top: 10px;
}

.sut-lv2 {
    margin-top: 10px;
}

.titnew-lv3 {
    font-weight: 700 !important;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.img-evnews {
    width: 121px;
    height: 74px;
    object-fit: cover;
}

.box-text-ev1 {
    height: 58px;
}

.hr-mv2 {
    margin-top: 0px !important;
}

.txt-sl-lv2 {
    font-weight: 700 !important;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    text-align: justify !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.lv2-block1 {
    padding-right: 0 !important;
}

.preview-line {
    position: absolute;
}

.hol-preview-video {
    width: 370px !important;
    height: 207px !important;
}

.absolute {
    position: absolute;
}

.txt-pre-video {
    font-size: 17px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.hol-text-vdp {
    margin-top: 15px;
    margin-bottom: 5px;
}

.hol-ct-video {
    margin-top: 20px;
}

.txt-pre-video:hover {
    text-decoration: underline;
}

.big-title-footer {
    font-size: 19px;
    font-weight: 600;
}

.info-fotter {
    font-size: 13px;
}

.name-footer {
    font-size: 15px;
}

.row-ct-ft1 {
    padding: 20px 0px;
}

.other-thing {
    position: absolute;
    right: 100px;
    top: 0;
    z-index: 10000;
}

.back-top {
    width: 55px;
    height: 55px;
    z-index: 10000;
    position: sticky;
    display: none;
    top: 90vh;
    animation: outIn .5s ease-in;
    box-shadow: 0px 0px 3px #939393;
}

@keyframes outIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    20% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 1;
    }

    70% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

section {
    position: relative;
    width: 100%;
    height: auto;
}

.divitemtop, .divrelateCat {
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
}

.divrelateCat {
    padding-bottom: 15px;
}



    .divitemtop:last-child, .divrelateCat:last-child {
        border-bottom: 0px solid #ddd;
    }

.divrelatetop {
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-left: 1px;
}

.adsRight {
    left: 1170px;
}

.a_left {
    width: 20px;
    text-align: center;
}

.a_right {
    padding-left: 20px;
}

.itemdocnhieu {
    display: inline-flex;
    border-bottom: 1px solid rgba(0,0,0,.1);
    padding-bottom: 1px;
    margin-bottom: 10px;
}

    .itemdocnhieu:last-child {
        border-bottom: 0px;
    }

.stthome {
    font-weight: bold;
    color: #1565C0;
}

.heightvanban {
    height: 600px;
    overflow: hidden;
}

i.fas.fa-circle {
    font-size: 7px;
}

.a_right a {
    font-weight: 600 !important;
    font-size: 14px;
}

.qifooterbgcolor {
    background-image: none !important;
}

.qifooterbgcolor {
    background-color: #fff;
}

.lineFooter {
    display: none;
}
.width1600 {
    max-width: 1600px;
}

.width100 {
    width: 100% !important;
}

.height100 {
    height: 100%;
}

a {
    color: black;
}

    a:hover {
        color: black;
        text-decoration: none;
    }

.lit-ht:after {
    content: ' |';
}

.lit-ht {
    font-size: 13px;
    font-weight: 500;
}

.lit-other {
    font-size: 13px;
    font-weight: 500;
}

@media (min-width: 768px) {
    .search-th {
        width: 200px;
    }
}

@media (min-width: 992px) {
    .search-th {
        width: 212px;
    }
}

@media (min-width: 1200px) {
    .search-th {
        width: 302px;
    }
}

.search-th i {
    position: absolute;
    margin-right: 10px;
    color: #1565C0;
}

.search-th input {
    background: linear-gradient(180deg, #FFFFFF 0%, #F1F1F1 100%);
    border: 1px solid #DDE0E4;
    box-sizing: border-box;
    border-radius: 6px;
    width: 100%;
    height: 32px;
    padding-left: 12px;
    padding-right: 28px;
}

input:focus {
    outline: none;
}

.head-sl {
    height: 40px;
    padding: 2px 0px 2px 0px;
}

.img-bnner {
    object-fit: cover;
    width: 100%;
}

.menu-option {
    height: 42px;
    width: 100%;
    background: #1565C0;
    position: sticky;
    top: 40px;
    z-index: 1000;
}

.menu-list {
    height: 100%;
}

    .menu-list i {
        color: white;
        font-size: 28px;
    }

.margin0 {
    margin: 0px !important;
}

.it-menu a {
    color: white;
    font-family: 'Roboto';
    font-size: 13px;
    text-transform: uppercase;
}

.it-menu {
    margin-left: 20px;
}

.status-line {
    height: 46px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F4F4F4 100%);
    padding-bottom: 2px;
    position: relative;
    box-shadow: 0px 0px 1px;
}

.time-topline {
    font-family: 'Roboto';
    font-size: 12px;
}

.t-hi {
    color: #1565C0;
    font-size: 15px;
    font-family: Roboto, sans-serif;
}

.body-ct {
    background-color: #F5F5F5;
}

.content {
    background-color: white;
    max-width: 1200px;
}

.fit-obj {
    object-fit: cover;
}

.width1200 {
    max-width: 1200px;
}

.ct-inside {
    padding: 20px;
}

.scroll-c {
    position: absolute;
    top: 0;
    display: none;
}

.in-left img {
    width: 125px;
    height: 150px;
    margin-bottom: 20px;
    object-fit: cover;
}

.in-right img {
    margin-bottom: 20px;
}

@media (min-width: 1600px) {
    .scroll-c {
        display: flex;
    }
}

.leftit {
    display: none !important;
}

@media (min-width: 1600px) {
    .leftit {
        display: flex !important;
    }
}

.rightit {
    display: none !important;
}

@media (min-width: 1600px) {
    .rightit {
        display: flex !important;
    }
}

i {
    cursor: pointer;
    user-select: none;
}

.in-left {
    display: none;
    margin-top: 20px;
}

@media (min-width: 1600px) {
    .in-left {
        display: block;
    }
}

.in-right {
    display: none;
    margin-top: 20px;
}

@media (min-width: 1600px) {
    .in-right {
        display: block;
    }
}

@media (min-width: 1600px) {
    .content {
        min-width: 1200px;
    }
}

.lright-it a {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    color: #FFFFFF;
    margin-right: 5px;
}

.navigation {
    background: #ffffff;
    box-shadow: 1px 2px 5px rgb(188,188,188);
    position: absolute;
    overflow: hidden;
    display: none;
}

.padding0 {
    padding: 0px !important;
}

.navigation-hol {
    position: sticky;
    top: 82px;
    z-index: 10000;
}

.tl-cm {
    font-size: 15px;
    font-weight: 600;
}

span {
    font-family: 'Roboto';
}

.r-ctnv {
    margin: 38px;
}

.col-aclose span {
    color: #1565C0;
    font-size: 15px;
    cursor: pointer;
    user-select: none;
}

.col-aclose i {
    color: #1565C0;
    margin-left: 5px;
}

.tit-mn {
    font-size: 15px;
    font-weight: 600;
}

.list-itnv a {
    font-size: 15px;
    font-weight: 400;
    line-height: 19.5px;
}

.v-more {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 130%;
    color: #1565C0;
    cursor: pointer;
    user-select: none;
}

.nv-hr {
    margin-top: 5px !important;
    margin-bottom: 2px !important;
}

.col.lv2-nv {
    margin-top: 49px;
}

.top-title {
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    font-size: 25px;
    line-height:32px;
    color: #1565C0;
    margin-top: 21px;
    overflow: hidden;
    text-align:left !important;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.navigation-hol a:hover {
    color: var(--red);
}

.navigation-hol .v-more:hover {
    text-decoration: underline;
    transition: .3s;
}

.hour-zone {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 122.19%;
    display: flex;
    align-items: center;
    color: #6F6F6F;
    padding-bottom: 5px;
    padding-top: 2px;
}

.top-review {
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 130%;
    color: #333333;
    padding-top: 6px;
}

.img-lv2-toppic {
}

.txt-tplv2 {
    font-weight: 700 !important;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    text-align: left !important;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.img-lv2 {
    height: 74px;
    width: 121px;
}

.item-zone {
    padding-bottom: 6px;
    height: 63px;
}

.lv3-title {
}

.ct-hrlv2 {
    margin-top: 0px !important;
    margin-bottom: 8px !important;
}

.title-lv2 {
    height: 60px;
    width: 100%;
    overflow: hidden;
}

.title-lv3 {
    font-size: 13px;
    font-weight: 700 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.bg-cl {
    background-color: #F5F5F5;
}

.b-title {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 26px;
    line-height: 30px;
    display: flex;
    align-items: center;
    color: #004CCB;
    padding-left: 15px;
    border-left-style: outset;
    border-left-color: #1565C0;
    margin-bottom: 0px;
}

.bn2 {
    padding-left: 20px;
    padding-right: 20px;
}

.white-back {
    background: white;
}



.hol-item {
    color: #C4C4C4;
}

.txt-ct {
    padding-left: 15px;
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 130%;
    color: #101010;
}

.it-ct {
    position: relative;
    padding: 10px;
    background: #ffffff;
    box-shadow: 0px 0px 0px 1px;
    border-radius: 6px;
    padding-right: 20px;
}

.itclhol {
    padding: 20px 20px 0px 0px;
}

.it-ct:hover {
    background: rgb(247,247,247);
    transition: .3s ease;
}

.ct-inside a:hover {
    text-decoration: underline;
    transition: .3s ease;
}

.spacer {
    display: flex;
    justify-content: space-between;
}

.header-snip {
    background: #004CCB;
}

    .header-snip span, .header-snip i {
        color: white;
    }

.bt-titct {
    font-weight: 500;
    font-size: 19px;
}

.more-ctsn {
    font-size: 15px;
    color: white;
    font-weight:400;
}

.d-grid {
    display: grid;
}

.txt-snipt {
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.timesnip {
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 122.19%;
    color: #828282;
    margin-top: 5px;
}

.hov-underline:hover {
    transition: .3s ease;
    text-decoration: underline;
}

.b-title-ev {
    font-size: 26px;
    color: #004CCB;
    font-weight: 500;
    border-left-width: 3px;
    padding-left: 15px;
    border-left-style: solid;
}

.gradient-1 {
    background: linear-gradient(180deg, #FFFFFF 0%, #F4F4F4 100%);
}

.r-hol-snip {
    padding-bottom: 15px;
}

.top-lv2-new {
    border: 1px solid #E7E7E7;
}

.titnew-lv2 {
    max-height: 74px;
}

.g-title {
    padding: 10px 15px;
}

.text-more {
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 136.69%;
    text-align: right;
    color: #1565C0;
}

.more-ctsn:hover {
    color: white;
}

.sec-head {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10000;
}

.menu-nav {
    width: 50px;
    transition: .6s ease-in;
}



.hz-v2 {
    padding-top: 10px;
}

.sut-lv2 {
    margin-top: 10px;
}

.titnew-lv3 {
    font-weight: 700 !important;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.img-evnews {
    width: 121px;
    height: 74px;
    object-fit: cover;
}

.box-text-ev1 {
    height: 58px;
}

.hr-mv2 {
    margin-top: 0px !important;
}

.txt-sl-lv2 {
    font-weight: 700 !important;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    text-align: justify !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.lv2-block1 {
    padding-right: 0 !important;
}

.preview-line {
    position: absolute;
}

.hol-preview-video {
    width: 370px !important;
    height: 207px !important;
}

.absolute {
    position: absolute;
}

.txt-pre-video {
    font-size: 17px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.hol-text-vdp {
    margin-top: 15px;
    margin-bottom: 5px;
}

.hol-ct-video {
    margin-top: 20px;
}

.txt-pre-video:hover {
    text-decoration: underline;
}

.big-title-footer {
    font-size: 19px;
    font-weight: 600;
}

.info-fotter {
    font-size: 13px;
}

.name-footer {
    font-size: 15px;
}

.row-ct-ft1 {
    padding: 20px 0px;
}

.other-thing {
    position: absolute;
    right: 100px;
    top: 0;
    z-index: 10000;
}

.back-top {
    width: 55px;
    height: 55px;
    z-index: 10000;
    position: sticky;
    display: none;
    top: 90vh;
    animation: outIn .5s ease-in;
    box-shadow: 0px 0px 3px #939393;
}

@keyframes outIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    20% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 1;
    }

    70% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}
.txt-tplv2
{
    max-height:60px;

}
.topnew .col.newitem:nth-child(2n)
{
    background-color:#f8f8f8;
}


.border-bottom:last-child, .d-grid:last-child > hr {
    border-bottom: 0px;
}

 .d-grid:last-child > hr {
   height:0px;
}


.border-lr {
    border-right: 1px solid rgb(231,231,231);
    border-left: 1px solid rgb(231,231,231);
}
    .border-lr:last-child {
        border-right: 1px solid rgb(231,231,231);
        border-left: 1px solid rgb(231,231,231);
        border-bottom: 1px solid rgb(231,231,231);
        border-radius:5px;
    }
section.d-grid.footer {
    background-color: #fff !important;
}
.footer > div > div.row-ct-ft1 {
    border-bottom: 1px solid #efefef;
    margin-bottom: 10px;
}
/* /App_Themes/hanoi/css/hanoi.css */
.container {
    min-width: 1200px;
}

#MainContent {
    min-width: 1200px;
}

.bgwhite {
    background: #fff;
}

.width1600 {
    max-width: 1600px;
}

a {
    text-decoration: none !important;
}

.width100 {
    width: 100% !important;
}

.height100 {
    height: 100%;
}

a {
    color: black;
}

    a:hover {
        color: black;
        text-decoration: none;
    }

.lit-ht:after {
    content: ' |';
}

.lit-ht {
    font-size: 13px;
    font-weight: 500;
}

.lit-other {
    font-size: 13px;
    font-weight: 500;
}

@media (min-width: 768px) {
    .search-th {
        width: 200px;
    }
}

@media (min-width: 992px) {
    .search-th {
        width: 212px;
    }
}

@media (min-width: 1200px) {
    .search-th {
        width: 302px;
    }
}

.search-th i {
    position: absolute;
    margin-right: 10px;
    color: #1565C0;
}

.search-th input {
    background: linear-gradient(180deg, #FFFFFF 0%, #F1F1F1 100%);
    border: 1px solid #DDE0E4;
    box-sizing: border-box;
    border-radius: 6px;
    width: 100%;
    height: 32px;
    padding-left: 12px;
    padding-right: 28px;
}

input:focus {
    outline: none;
}

.head-sl {
    height: 40px;
    padding: 2px 0px 2px 0px;
}

.img-bnner {
    object-fit: cover;
    width: 100%;
}

.menu-option {
    height: 42px;
    width: 100%;
    background: #1565C0;
    position: sticky;
    top: 40px;
    z-index: 1000;
}

.menu-list {
    height: 100%;
}

    .menu-list i {
        color: white;
        font-size: 28px;
    }

.margin0 {
    margin: 0px !important;
}

.it-menu a {
    color: white;
    font-family: 'Roboto';
    font-size: 13px;
    text-transform: uppercase;
}

.it-menu {
    margin-left: 20px;
}

.status-line {
    height: 46px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F4F4F4 100%);
    padding-bottom: 2px;
    position: relative;
    box-shadow: 0px 0px 1px;
}

.time-topline {
    font-family: 'Roboto';
    font-size: 12px;
}

.t-hi {
    color: #1565C0;
    font-size: 15px;
    font-family: Roboto, sans-serif;
}

.body-ct {
    background-color: #F5F5F5;
}

.content {
    background-color: white;
    max-width: 1200px;
}

.fit-obj {
    object-fit: cover;
}

.width1200 {
    max-width: 1200px;
}

.ct-inside {
    padding: 1px 10px !important;
}

.scroll-c {
    position: absolute;
    top: 0;
    display: none;
}

.in-left img {
    width: 125px;
    height: 150px;
    margin-bottom: 20px;
    object-fit: cover;
}

.in-right img {
    margin-bottom: 20px;
}

@media (min-width: 1600px) {
    .scroll-c {
        display: flex;
    }
}

.leftit {
    display: none !important;
}

@media (min-width: 1600px) {
    .leftit {
        display: flex !important;
    }
}

.rightit {
    display: none !important;
}

@media (min-width: 1600px) {
    .rightit {
        display: flex !important;
    }
}

i {
    cursor: pointer;
    user-select: none;
}

.in-left {
    display: none;
    margin-top: 20px;
}

@media (min-width: 1600px) {
    .in-left {
        display: block;
    }
}

.in-right {
    display: none;
    margin-top: 20px;
}

@media (min-width: 1600px) {
    .in-right {
        display: block;
    }
}

@media (min-width: 1600px) {
    .content {
        min-width: 1200px;
    }
}

.lright-it a {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    color: #FFFFFF;
    margin-right: 5px;
}

.navigation {
    background: #ffffff;
    box-shadow: 1px 2px 5px rgb(188,188,188);
    position: absolute;
    overflow: hidden;
    display: none;
}

.padding0 {
    padding: 0px !important;
}

.navigation-hol {
    position: sticky;
    top: 82px;
    z-index: 10000;
}

.tl-cm {
    font-size: 15px;
    font-weight: 600;
}

span {
    font-family: 'Roboto';
}

.r-ctnv {
    margin: 38px;
}

.col-aclose span {
    color: #1565C0;
    font-size: 15px;
    cursor: pointer;
    user-select: none;
}

.col-aclose i {
    color: #1565C0;
    margin-left: 5px;
}

.tit-mn {
    font-size: 15px;
    font-weight: 600;
}

.list-itnv a {
    font-size: 15px;
    font-weight: 400;
    line-height: 19.5px;
}

.v-more {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 130%;
    color: #1565C0;
    cursor: pointer;
    user-select: none;
}

.nv-hr {
    margin-top: 5px !important;
    margin-bottom: 2px !important;
}

.col.lv2-nv {
    margin-top: 49px;
}

.top-title {
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 25px;
    line-height: 130%;
    color: #005894;
    margin-top: 21px;
    overflow: hidden;
    text-align: left !important;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.navigation-hol a:hover {
    color: var(--red);
}

.navigation-hol .v-more:hover {
    text-decoration: underline;
    transition: .3s;
}

.hour-zone {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 122.19%;
    display: flex;
    align-items: center;
    color: #6F6F6F;
    padding-bottom: 5px;
    padding-top: 2px;
}

.top-review {
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 130%;
    color: #333333;
    padding-top: 6px;
}

.img-lv2-toppic {
}

.txt-tplv2 {
    font-weight: 700 !important;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    text-align: justify !important;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.img-lv2 {
    height: 74px;
    width: 121px;
}

.item-zone {
    padding-bottom: 6px;
    height: 63px;
}

.lv3-title {
}

.ct-hrlv2 {
    margin-top: 0px !important;
    margin-bottom: 8px !important;
}

.title-lv2 {
    height: 60px;
    width: 100%;
    overflow: hidden;
}

.title-lv3 {
    font-size: 13px;
    font-weight: 700 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.bg-cl {
    background-color: #F5F5F5;
}

.b-title {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 30px;
    line-height: 35px;
    display: flex;
    align-items: center;
    color: #1565C0;
    padding-left: 15px;
    border-left-style: outset;
    border-left-color: #1565C0;
    margin-bottom: 0px;
}

.bn2 {
    padding-left: 20px;
    padding-right: 20px;
}

.white-back {
    background: white;
}

.ct-v {
    padding: 4px 0px 34px 0px;
}

.hol-item {
    color: #C4C4C4;
}

.txt-ct {
    padding-left: 15px;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    line-height: 130%;
}

.it-ct {
    position: relative;
    padding: 10px;
    background: #ffffff;
    box-shadow: 0px 0px 0px 1px;
    border-radius: 6px;
    padding-right: 20px;
}

.itclhol {
    padding: 20px 20px 0px 0px;
}

.it-ct:hover {
    background: rgb(247,247,247);
    transition: .3s ease;
}

.ct-inside a:hover {
    text-decoration: underline;
    transition: .3s ease;
}

.spacer {
    display: flex;
    justify-content: space-between;
}

.header-snip {
    background: #1565C0;
}

    .header-snip span, .header-snip i {
        color: white;
    }

.bt-titct {
    font-weight: 400;
    font-size: 19px;
}

.more-ctsn {
    font-size: 13px;
    color: white;
}

.d-grid {
    display: grid;
}

.txt-snipt {
    font-style: normal !important;
    font-weight: 500;
    font-size: 15px !important;
    line-height: 23px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.timesnip {
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 122.19%;
    color: #828282;
    margin-top: 5px;
}

.hov-underline:hover {
    transition: .3s ease;
    text-decoration: underline;
}

.b-title-ev {
    font-size: 30px;
    color: #1565C0;
    border-left-width: 3px;
    padding-left: 15px;
    border-left-style: solid;
}

.gradient-1 {
    background: linear-gradient(180deg, #FFFFFF 0%, #F4F4F4 100%);
}

.r-hol-snip {
    padding-bottom: 15px;
}

.top-lv2-new {
    border: 1px solid #E7E7E7;
}

.titnew-lv2 {
    max-height: 74px;
}

.g-title {
    padding: 10px 15px;
}

.text-more {
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 136.69%;
    text-align: right;
    color: #1565C0;
}

.more-ctsn:hover {
    color: white;
}

.sec-head {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10000;
}

.menu-nav {
    width: 50px;
    transition: .6s ease-in;
}

.border-lr {
    border-right: 1px solid rgb(231,231,231);
    border-left: 1px solid rgb(231,231,231);
}

.hz-v2 {
    padding-top: 10px;
}

.sut-lv2 {
    margin-top: 10px;
}

.titnew-lv3 {
    font-weight: 700 !important;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.img-evnews {
    width: 121px;
    height: 74px;
    object-fit: cover;
}

.box-text-ev1 {
    height: 58px;
}

.hr-mv2 {
    margin-top: 0px !important;
}

.txt-sl-lv2 {
    font-weight: 700 !important;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    text-align: justify !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.lv2-block1 {
    padding-right: 0 !important;
}

.preview-line {
    position: absolute;
}

.hol-preview-video {
    width: 370px !important;
    height: 207px !important;
}

.absolute {
    position: absolute;
}

.txt-pre-video {
    font-size: 17px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.hol-text-vdp {
    margin-top: 15px;
    margin-bottom: 5px;
}

.hol-ct-video {
    margin-top: 20px;
}

.txt-pre-video:hover {
    text-decoration: underline;
}

.big-title-footer {
    font-size: 19px;
    font-weight: 600;
}

.info-fotter {
    font-size: 13px;
}

.name-footer {
    font-size: 15px;
}

.row-ct-ft1 {
    padding: 30px 0px;
}

.other-thing {
    position: absolute;
    right: 100px;
    top: 0;
    z-index: 10000;
}

.back-top {
    width: 55px;
    height: 55px;
    z-index: 10000;
    position: sticky;
    display: none;
    top: 90vh;
    animation: outIn .5s ease-in;
    box-shadow: 0px 0px 3px #939393;
}

@keyframes outIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    20% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 1;
    }

    70% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

section {
    position: relative;
    width: 100%;
    height: auto;
}

.divitemtop, .divrelateCat {
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
}

.divrelateCat {
    padding-bottom: 15px;
}



    .divitemtop:last-child, .divrelateCat:last-child {
        border-bottom: 0px solid #ddd;
    }

.divrelatetop {
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-left: 1px;
}

.adsRight {
    left: 1185px;
}

.a_left {
    width: 20px;
    text-align: center;
}

.a_right {
    padding-left: 20px;
}

.itemdocnhieu {
    display: inline-flex;
    border-bottom: 1px solid rgba(0,0,0,.1);
    padding-bottom: 1px;
    margin-bottom: 10px;
}

    .itemdocnhieu:last-child {
        border-bottom: 0px;
    }

.stthome {
    font-weight: bold;
    color: #1565C0;
}

.heightvanban {
    height: 600px;
    overflow-y:scroll;
}

i.fas.fa-circle {
    font-size: 9px;
}

.a_right a {
    font-weight: 600 !important;
    font-size: 14px;
}

.qifooterbgcolor {
    background-image: none !important;
}

.qifooterbgcolor {
    background-color: #fff;
}

.lineFooter {
    display: none;
}

.width1600 {
    max-width: 1600px;
}

.width100 {
    width: 100% !important;
}

.height100 {
    height: 100%;
}

a {
    color: black;
}

    a:hover {
        color: black;
        text-decoration: none;
    }

.lit-ht:after {
    content: ' |';
}

.lit-ht {
    font-size: 13px;
    font-weight: 500;
}

.lit-other {
    font-size: 13px;
    font-weight: 500;
}

@media (min-width: 768px) {
    .search-th {
        width: 200px;
    }
}

@media (min-width: 992px) {
    .search-th {
        width: 212px;
    }
}

@media (min-width: 1200px) {
    .search-th {
        width: 302px;
    }
}

.search-th i {
    position: absolute;
    margin-right: 10px;
    color: #1565C0;
}

.search-th input {
    background: linear-gradient(180deg, #FFFFFF 0%, #F1F1F1 100%);
    border: 1px solid #DDE0E4;
    box-sizing: border-box;
    border-radius: 6px;
    width: 100%;
    height: 32px;
    padding-left: 12px;
    padding-right: 28px;
}

input:focus {
    outline: none;
}

.head-sl {
    height: 40px;
    padding: 2px 0px 2px 0px;
}

.img-bnner {
    object-fit: cover;
    width: 100%;
}

.menu-option {
    height: 42px;
    width: 100%;
    background: #1565C0;
    position: sticky;
    top: 40px;
    z-index: 1000;
}

.menu-list {
    height: 100%;
}

    .menu-list i {
        color: white;
        font-size: 28px;
    }

.margin0 {
    margin: 0px !important;
}

.it-menu a {
    color: white;
    font-family: 'Roboto';
    font-size: 13px;
    text-transform: uppercase;
}

.it-menu {
    margin-left: 20px;
}

.status-line {
    height: 46px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F4F4F4 100%);
    padding-bottom: 2px;
    position: relative;
    box-shadow: 0px 0px 1px;
}

.time-topline {
    font-family: 'Roboto';
    font-size: 12px;
}

.t-hi {
    color: #1565C0;
    font-size: 15px;
    font-family: Roboto, sans-serif;
}

.body-ct {
    background-color: #F5F5F5;
}

.content {
    background-color: white;
    max-width: 1200px;
}

.fit-obj {
    object-fit: cover;
}

.width1200 {
    max-width: 1200px;
}



.scroll-c {
    position: absolute;
    top: 0;
    display: none;
}

.in-left img {
    width: 125px;
    height: 150px;
    margin-bottom: 20px;
    object-fit: cover;
}

.in-right img {
    margin-bottom: 20px;
}

@media (min-width: 1600px) {
    .scroll-c {
        display: flex;
    }
}

.leftit {
    display: none !important;
}

@media (min-width: 1600px) {
    .leftit {
        display: flex !important;
    }
}

.rightit {
    display: none !important;
}

@media (min-width: 1600px) {
    .rightit {
        display: flex !important;
    }
}

i {
    cursor: pointer;
    user-select: none;
}

.in-left {
    display: none;
    margin-top: 20px;
}

@media (min-width: 1600px) {
    .in-left {
        display: block;
    }
}

.in-right {
    display: none;
    margin-top: 20px;
}

@media (min-width: 1600px) {
    .in-right {
        display: block;
    }
}

@media (min-width: 1600px) {
    .content {
        min-width: 1200px;
    }
}

.lright-it a {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    color: #FFFFFF;
    margin-right: 5px;
}

.navigation {
    background: #ffffff;
    box-shadow: 1px 2px 5px rgb(188,188,188);
    position: absolute;
    overflow: hidden;
    display: none;
}

.padding0 {
    padding: 0px !important;
}

.navigation-hol {
    position: sticky;
    top: 82px;
    z-index: 10000;
}

.tl-cm {
    font-size: 15px;
    font-weight: 600;
}

span {
    font-family: 'Roboto';
}

.r-ctnv {
    margin: 38px;
}

.col-aclose span {
    color: #1565C0;
    font-size: 15px;
    cursor: pointer;
    user-select: none;
}

.col-aclose i {
    color: #1565C0;
    margin-left: 5px;
}

.tit-mn {
    font-size: 15px;
    font-weight: 600;
}

.list-itnv a {
    font-size: 15px;
    font-weight: 400;
    line-height: 19.5px;
}

.v-more {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 130%;
    color: #1565C0;
    cursor: pointer;
    user-select: none;
}

.nv-hr {
    margin-top: 5px !important;
    margin-bottom: 2px !important;
}

.col.lv2-nv {
    margin-top: 49px;
}

.top-title {
    font-family: Roboto;
    font-style: normal;
    font-weight: bold;
    font-size: 25px;
    line-height: 130%;
    color: #005894;
    margin-top: 21px;
    overflow: hidden;
    text-align: left !important;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.navigation-hol a:hover {
    color: var(--red);
}

.navigation-hol .v-more:hover {
    text-decoration: underline;
    transition: .3s;
}

.hour-zone {
    font-style: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 122.19%;
    display: flex;
    align-items: center;
    color: #6F6F6F;
    padding-bottom: 5px;
    padding-top: 2px;
}

.top-review {
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 130%;
    color: #333333;
    padding-top: 6px;
}

.img-lv2-toppic {
}

.txt-tplv2 {
    font-weight: 700 !important;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    text-align: justify !important;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.img-lv2 {
    height: 74px;
    width: 121px;
}

.item-zone {
    padding-bottom: 6px;
    height: 63px;
}

.lv3-title {
}

.ct-hrlv2 {
    margin-top: 0px !important;
    margin-bottom: 8px !important;
}

.title-lv2 {
    height: 60px;
    width: 100%;
    overflow: hidden;
}

.title-lv3 {
    font-size: 13px;
    font-weight: 700 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.bg-cl {
    background-color: #F5F5F5;
}

.b-title {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 30px;
    line-height: 35px;
    display: flex;
    align-items: center;
    color: #1565C0;
    padding-left: 15px;
    border-left-style: outset;
    border-left-color: #1565C0;
    margin-bottom: 5px;
}

.bn2 {
    padding-left: 20px;
    padding-right: 20px;
}

.white-back {
    background: white;
}

.ct-v {
    padding: 4px 0px 34px 20px;
}

.hol-item {
    color: #C4C4C4;
}

.txt-ct {
    padding-left: 15px;
    font-style: normal;
    font-weight: 500;
    font-size: 17px;
    line-height: 130%;
}

.it-ct {
    position: relative;
    padding: 10px;
    background: #ffffff;
    box-shadow: 0px 0px 0px 1px;
    border-radius: 6px;
    padding-right: 20px;
}

.itclhol {
    padding: 20px 20px 0px 0px;
}

.it-ct:hover {
    background: rgb(247,247,247);
    transition: .3s ease;
}

.ct-inside a:hover {
    text-decoration: underline;
    transition: .3s ease;
}

.spacer {
    display: flex;
    justify-content: space-between;
}

.header-snip {
    background: #1565C0;
}

    .header-snip span, .header-snip i {
        color: white;
    }

.bt-titct {
    font-weight: 500;
    font-size: 19;
}

.more-ctsn {
    font-size: 13px;
    color: white;
}

.d-grid {
    display: grid;
}

.txt-snipt {
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 130%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.timesnip {
    font-style: normal;
    font-weight: normal;
    font-size: 11px;
    line-height: 122.19%;
    color: #828282;
    margin-top: 5px;
}

.hov-underline:hover {
    transition: .3s ease;
    text-decoration: underline;
}

.b-title-ev {
    font-size: 30px;
    color: #1565C0;
    border-left-width: 3px;
    padding-left: 15px;
    border-left-style: solid;
}
.b-title-ev a {
    font-size: 30px;
    color: #1565C0;
    font-weight:500;
   
    
}

.gradient-1 {
    background: linear-gradient(180deg, #FFFFFF 0%, #F4F4F4 100%);
}

.r-hol-snip {
    padding-bottom: 15px;
}

.top-lv2-new {
    border: 1px solid #E7E7E7;
}

.titnew-lv2 {
    max-height: 74px;
}

.g-title {
    padding: 10px 15px;
}

.text-more {
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 136.69%;
    text-align: right;
    color: #1565C0;
}

.more-ctsn:hover {
    color: white;
}

.sec-head {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10000;
}

.menu-nav {
    width: 50px;
    transition: .6s ease-in;
}

.border-lr {
    border-right: 1px solid rgb(231,231,231);
    border-left: 1px solid rgb(231,231,231);
}

.hz-v2 {
    padding-top: 10px;
}

.sut-lv2 {
    margin-top: 10px;
}

.titnew-lv3 {
    font-weight: 700 !important;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.img-evnews {
    width: 121px;
    height: 74px;
    object-fit: cover;
}

.box-text-ev1 {
    height: 58px;
}

.hr-mv2 {
    margin-top: 0px !important;
}

.txt-sl-lv2 {
    font-weight: 700 !important;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    text-align: justify !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.lv2-block1 {
    padding-right: 0 !important;
}

.preview-line {
    position: absolute;
}

.hol-preview-video {
    width: 370px !important;
    height: 207px !important;
}

.absolute {
    position: absolute;
}

.txt-pre-video {
    font-size: 17px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.hol-text-vdp {
    margin-top: 15px;
    margin-bottom: 5px;
}

.hol-ct-video {
    margin-top: 20px;
}

.txt-pre-video:hover {
    text-decoration: underline;
}

.big-title-footer {
    font-size: 19px;
    font-weight: 600;
}

.info-fotter {
    font-size: 13px;
}

.name-footer {
    font-size: 15px;
}

.row-ct-ft1 {
    padding: 30px 0px;
}

.other-thing {
    position: absolute;
    right: 100px;
    top: 0;
    z-index: 10000;
}

.back-top {
    width: 55px;
    height: 55px;
    z-index: 10000;
    position: sticky;
    display: none;
    top: 90vh;
    animation: outIn .5s ease-in;
    box-shadow: 0px 0px 3px #939393;
}

@keyframes outIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    20% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.3);
        opacity: 1;
    }

    70% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}
#MainContent
{
    box-shadow:none !important;
}
/* /App_Themes/all/allcss/qi-hanoi-rp.css */
/* =====================================================================================================
   BẢN RESPONSIVE CỦA HỌ GIAO DIỆN HÀ NỘI  (/homegdhn2rp)
   Tách riêng thành tệp này theo yêu cầu user 2026-08-05: "tách phần responsive của hà nội ra làm 1 file
   riêng để không ảnh hưởng đến các giao diện khác" — trước đó nằm trong khối <style> của trang.

   ⚠️ Tệp này CHỈ được nạp ở các địa chỉ …rp của HỌ HÀ NỘI: `/homegdhn2rp` và — từ 2026-08-06 —
   `/homegd12rp`, `/homegd1312rp`, `/homegd1412rp` (ba mẫu này cũng dựng thân trang bằng bộ control
   `Control/sgdhn/*`; user báo "homegd12rp trên mobile chưa có rp": không nạp tệp này thì `#MainContent`
   vẫn rộng 1200px trên điện thoại, đo được 806 thẻ thò ra ngoài màn hình 440px).
   Mọi rule đều bọc trong `.qirp` (vùng thân trang của layout `_MasterResponsive`) hoặc trong media
   query, nên không đụng tới giao diện khác dù có ai nạp lẫn.

   Bố cục tệp:
     ① ≥992px  — giữ đúng số đo của bản desktop (homegdhn2.aspx)
     ② ≤991px  — phần BÙ cho máy tính bảng / điện thoại
   Số đo trong chú thích đều là số ĐO ĐƯỢC trên trang thật hoặc trên bản port ở 430px.
   ===================================================================================================== */

/* ============================ ① KHỔ MÁY TÍNH (≥992px) ============================ */
@media only screen and (min-width: 992px) {
    /* Giữ nguyên khối kiểu nội tuyến của homegdhn2.aspx */
    .adsRight { left: 1185px !important; }

    .topnew .col.newitem { border-bottom: 1px solid #ddd; }
    .topnew .col.newitem:last-child { border-bottom: 0px solid #ddd; }

    .hnimgtop { width: 125px; }
    .hntexttop { width: 153px; }

    /*  🔴 `static`, KHÔNG phải `sticky` (sửa 2026-08-12 — user báo "slide chữ bị chèn lên ảnh").
        Bản cũ ghi `sticky` để kéo khối chữ ra khỏi kiểu phủ-lên-ảnh (mặc định `.carousel-caption` của
        Bootstrap là `position:absolute`). Nhưng `sticky` VẪN ăn `bottom: 20px` của lớp đó: hễ ảnh+chữ
        cao hơn chiều cao ĐÃ GHIM của `.carousel-inner` (JS đặt theo slide cao nhất) là khối chữ bị kéo
        LÊN đúng bằng phần dôi ⇒ trèo lên ảnh. Đo được: nội dung 513 / khung 514 ⇒ trèo 19px;
        nội dung 572 ⇒ trèo 78px. `static` thì `bottom` vô hiệu, chữ luôn nằm dưới ảnh.
        (Đã đối chiếu: lề trái và bề rộng khối chữ KHÔNG đổi — 355 / 585px.)  */
    .caption2 { position: static !important; }
    /*  `margin-top: 6px` của bản gốc làm ẢNH SLIDE thấp hơn hai cột bên phải đúng 6px (đo: ảnh slide
        y=333 · ảnh tin cột giữa y=327 · thẻ "Tin mới nhất" y=328) ⇒ bỏ đi cho ba cột thẳng mép trên
        (user 2026-08-06: "cho tin thẳng cùng với ảnh + tin mới nhất"). */
    .item-ratio2 { object-fit: fill !important; margin-top: 0; }

    .body-ct { margin: 0px -10px; }

    /*  Khoảng cách giữa các khối = 10px theo chuẩn chung (user chốt 2026-08-05) — giống /homegdhn2.
        Trang thật để các khối DÍNH LIỀN (khe 0). `:not(:empty)` để dải quảng cáo đang tắt không tạo khe. */
    .body-ct > .width100 > *:not(:empty) + *:not(:empty) { margin-top: 10px; }

    /* =================================================================================================
       ⓪ CHUẨN HOÁ KHOẢNG CÁCH 10px CHO BẢN MÁY TÍNH (user chốt 2026-08-06: "chuẩn hoá lại khoảng cách
       10px đối với các tin, khối tin, trên, dưới, trái, phải" · "tạo nhiều khoảng trắng và khoảng cách
       tin giữa các khối không đồng đều").

       Số ĐO TRƯỚC KHI SỬA ở 1366px (mỗi loại tin một kiểu, chênh nhau tới gấp đôi):
         khe cột giữa ba thẻ Thông báo|Văn bản|Đọc nhiều = **24px** · đệm trong thẻ (`.card-body`) 16px ·
         `.hol-itct` 10/14px · `.divitemtop` khe 15 · `.divrelateCat` 16 · `.itemdocnhieu` 10 ·
         `.itclhol` đệm 20 · `.col.d-grid` vạch cách 16 · `.border-lr(2)` đệm 9/12 · `.newitem` khe 0.
       CHỐT: mọi khe/đệm = 10px, mỗi tin "10px — vạch — 10px" y chuẩn đã dùng cho bản điện thoại.
       ================================================================================================= */

    /*  ⓪a KHE GIỮA CÁC CỘT = 10px. Lưới Hà Nội dùng biến gutter của Bootstrap 5 (mặc định 24px ⇒ cột
        đệm 12px, hàng lùi -12px) nên chỉ cần đổi biến là cả đệm lẫn lề âm co theo, không phá bố cục. */
    .qirp .body-ct .row { --bs-gutter-x: 10px; }

    /*  ⓪b ĐỆM TRONG KHỐI = 10px (thẻ card · khối chuyên mục · dải trắng bọc ngoài). */
    .qirp .body-ct .card-body { padding: 10px !important; }
    /* `.hol-itct` chính là thẻ cột ⇒ đệm ngang 5px cho khớp nhịp 5+5 ở trên, đệm dọc 10px. */
    .qirp .body-ct .hol-itct { padding: 10px 5px !important; }

    .qirp .body-ct .white-back,
    .qirp .body-ct .r-hol-snip {
        padding-bottom: 10px !important;
        margin-bottom: 0 !important;
    }

    /*  ⓪c MỌI LOẠI TIN CÙNG MỘT NHỊP: 10px — vạch 1px — 10px, tin cuối không kẻ.
        Chín lớp tin của bộ Hà Nội (tìm bằng cách leo từ tiêu đề lên thẻ có ≥2 anh em cùng kiểu). */
    .qirp .body-ct .divitemtop,
    .qirp .body-ct .topnew .col.newitem,
    .qirp .body-ct .col.top-lv2-new,
    .qirp .body-ct .divrelateCat,
    .qirp .body-ct .itemdocnhieu,
    .qirp .body-ct .heightvanban > .col.d-grid,
    .qirp .body-ct .border-lr,
    .qirp .body-ct .border-lr2 {
        padding-top: 0 !important;
        padding-bottom: 10px !important;
        margin-top: 0 !important;
        margin-bottom: 10px !important;
        border-bottom: 1px solid #e6ebf1 !important;
    }

    .qirp .body-ct .divitemtop:last-child,
    .qirp .body-ct .topnew .col.newitem:last-child,
    .qirp .body-ct .col.top-lv2-new:last-child,
    .qirp .body-ct .divrelateCat:last-child,
    .qirp .body-ct .itemdocnhieu:last-child,
    .qirp .body-ct .heightvanban > .col.d-grid:last-child,
    .qirp .body-ct .border-lr:last-child,
    .qirp .body-ct .border-lr2:last-child {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        border-bottom: 0 !important;
    }

    /*  🔴 TIN BỊ GHIM CHIỀU CAO ⇒ VẠCH NGĂN CẮT NGANG NỘI DUNG: bộ CSS Hà Nội ghim `.divrelateCat` 81px,
        `.divitemtop` 87px… trong khi ảnh + hai dòng chữ cao hơn ⇒ đo được dòng ngày THÒ XUỐNG DƯỚI vạch
        3px, còn khoảng từ đáy nội dung tới vạch ra số ÂM (user 2026-08-06: "khoảng cách giữa các khối
        tin và tin trên dưới thanh border ngăn cách chưa đúng 10px"). Cho cao tự nhiên thì đệm 10px mới
        đúng là 10px. */
    .qirp .body-ct .divrelateCat,
    .qirp .body-ct .divitemtop,
    .qirp .body-ct .col.top-lv2-new,
    .qirp .body-ct .border-lr,
    .qirp .body-ct .border-lr2,
    /*  Hai thẻ BÊN TRONG tin cũng ghim chiều cao và cho con TRÀN RA: `.box-text-ev1` cao 58px trong khi
        tiêu đề 63 + dòng ngày 22 = 85 ⇒ ngày thò xuống dưới vạch; ảnh `position:absolute` trong khung
        tỉ lệ 70px lại vẽ 74px. */
    .qirp .body-ct .divrelateCat .box-text-ev1,
    .qirp .body-ct .divrelateCat > .row,
    .qirp .body-ct .divrelateCat > .row > [class*="col"],
    .qirp .body-ct .divrelateCat .d-grid {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    /*  Hàng trong `.divitemtop` bị ghim `height: 86px` (kiểu nội tuyến của bản gốc) trong khi nội dung
        chỉ cao 82 ⇒ dư 4–5px trước khi cộng đệm 10 ⇒ khoảng "tin → vạch" thành **15px** còn "vạch →
        tin sau" là 10px (user 2026-08-06: "khoảng cách tin đến thanh border bottom vẫn chưa đồng đều").
        Cho cao tự nhiên thì hai khoảng bằng nhau. */
    .qirp .body-ct .divitemtop > .row,
    .qirp .body-ct .divitemtop .hnimgtop,
    .qirp .body-ct .divitemtop .hntexttop,
    .qirp .body-ct .divitemtop .title-lv2 {
        height: auto !important;
        min-height: 0 !important;
    }

    .qirp .body-ct .divrelateCat a.ratio-16x9_pd { display: block; }

    .qirp .body-ct .divrelateCat img.item-ratio {
        position: absolute !important;
        top: 0; left: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }

    /*  Vạch 1px CÓ SẴN bên trong từng tin (`.width100` với lề 16px) sẽ thành vạch THỨ HAI ⇒ ẩn đi,
        vạch ngăn nay là `border-bottom` của chính tin. */
    .qirp .body-ct .heightvanban > .col.d-grid > .width100,
    .qirp .body-ct .divitemtop > .width100,
    .qirp .body-ct .itemdocnhieu > .width100,
    /*  Trong khối "Tin tức - sự kiện", mỗi `.border-lr` còn kèm sẵn một thẻ `hr.width100` ⇒ cộng với
        vạch `border-bottom` của tin thành **HAI gạch** sát nhau (user 2026-08-06: "thừa 1 gạch border"). */
    .qirp .body-ct .border-lr > hr.width100,
    .qirp .body-ct .border-lr2 > hr.width100,
    .qirp .body-ct .col.top-lv2-new > hr.width100 { display: none !important; }

    /*  ⓪d "Chuyên mục" (chip) — đệm 20px lệch hẳn so với phần còn lại. */
    .qirp .body-ct .itclhol { padding: 0 10px 10px 0 !important; }

    /*  ⓪d2 KHUNG DANH SÁCH GHIM 600px (`.heightvanban`) LÀ FLEX-WRAP ⇒ `align-content` mặc định KÉO GIÃN
        các hàng cho đầy khung: đo được mỗi tin cao **94px** trong khi chữ + ngày chỉ ~59px ⇒ thừa ~35px
        giữa dòng ngày và vạch ngăn (user 2026-08-06: "đọc nhiều nhất khoảng cách giữa tin và thanh
        border dưới khá lớn"). Xếp từ trên xuống, dư thì CUỘN — không kéo giãn từng tin. */
    .qirp .body-ct .heightvanban {
        align-content: flex-start !important;
        overflow-y: auto;
        scrollbar-width: thin;
    }

    /*  Tiêu đề tin trong các thẻ này cắt tối đa **3 dòng**, KHÔNG tính dòng ngày (user chốt cùng lúc).
        Bản gốc để clamp 2 ⇒ câu cụt sớm dù còn chỗ. */
    .qirp .body-ct .heightvanban .txt-snipt,
    .qirp .body-ct .itemdocnhieu .txt-snipt,
    .qirp .body-ct .col.d-grid .txt-snipt {
        display: -webkit-box !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3 !important;
        overflow: hidden;
    }

    /*  ⓪e MÉP TRÁI/PHẢI: tiêu đề khối và chữ tin phải THẲNG MỘT ĐƯỜNG, cách khung khối đúng 10px.
        Đo trước khi sửa (khối "Tin tức", 1366px): ô tiêu đề đệm trái **15px** ⇒ chữ ở x=94, còn chữ
        tin đi qua hai lớp đệm 10px lồng nhau ⇒ x=99 — lệch 5px, nhìn rõ khi khối có ảnh. */
    /*  Lề trong của KHỐI = 10px, nhưng chia làm hai nửa 5px (hàng 5px + cột 5px) để khe giữa HAI cột
        cạnh nhau vẫn đúng 10px — nếu dồn cả 10px vào cột thì hai cột cạnh nhau cộng lại thành 20px
        (đo được ở ba thẻ Thông báo | Văn bản | Đọc nhiều nhất). */
    .qirp .body-ct .row.width1200 > .col,
    .qirp .body-ct .row.width1200 > [class*="col-"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .qirp .body-ct .hol-itct > .width100 > .row.ct-inside,
    .qirp .body-ct .hol-itct > .row.ct-inside {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /*  Ba nguồn đệm trái CÒN SÓT (đo lần hai): hàng bọc khối "Chuyên mục" đệm **20px**; ô tin của
        "Tin mới nhất" (`.col.newitem`) đệm ngang **15px** chồng lên đệm 10px của thẻ; thanh tiêu đề
        thẻ (`.card-header`) đệm **8/16px** ⇒ chữ tiêu đề lệch 6px so với chữ tin bên dưới. */
    .qirp .body-ct .row.width1200 {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .qirp .body-ct .topnew .col.newitem {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .qirp .body-ct .card-header { padding: 10px !important; }

    /*  ⓪l KHE TỪ THANH TIÊU ĐỀ XUỐNG DÒNG CHỮ ĐẦU TIÊN = 15px (user chốt 2026-08-06: "khoảng cách này
        hơi lớn, để chỉ 15px"). Đo trước: **30px** = đệm trên 10 của thân thẻ + 10 của tin đầu + 10 bên
        trong tin. Bỏ đệm trên của thân thẻ và rút đệm trên của TIN ĐẦU còn 5px. */
    .qirp .body-ct .card-body.qirp-hn-dong-deu,
    .qirp .body-ct .topnew,
    .qirp .body-ct .card-body:has(.heightvanban),
    .qirp .body-ct .card-body:has(.itemdocnhieu) { padding-top: 0 !important; }

    /*  Tin của "Tin mới nhất" còn 10px đệm sẵn BÊN TRONG nên chỉ cần 5px; hai thẻ kia chữ nằm sát mép
        trên của hộp nên cần đủ 15px — đo lại cả ba đều ra đúng 15px. */
    .qirp .body-ct .topnew .col.newitem:first-child { padding-top: 5px !important; }

    .qirp .body-ct .heightvanban > .col.d-grid:first-child,
    .qirp .body-ct .itemdocnhieu:first-child { padding-top: 15px !important; }

    /*  ⓪k KHỐI SLIDE: KHE ẢNH → TIÊU ĐỀ VỀ 10px VÀ BỎ DÒNG NGÀY (user 2026-08-06: "khoảng cách từ chữ
        đến ảnh… hiện đang hơi lớn, bỏ dòng ngày tháng").
        Đo trước khi sửa: ảnh kết thúc y=617, tiêu đề bắt đầu y=658 ⇒ **41px**, gồm `padding: 20px 0` của
        `.caption2` + `margin-top: 21px` của thẻ <a> trong <h3>. (Cùng lối đã làm cho bản điện thoại.) */
    .qirp .body-ct .caption2 {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        margin-top: 0 !important;
    }

    .qirp .body-ct .caption2 h3,
    .qirp .body-ct .caption2 h3 > a {
        margin-top: 0 !important;
    }

    /* dòng ngày của TIN LỚN trong slide — bỏ hẳn; các khối tin khác vẫn giữ ngày */
    .qirp .body-ct .caption2 .hour-zone,
    .qirp .body-ct .caption2 .col:has(> .hour-zone) { display: none !important; }

    /*  ⓪f2 THANH HOVER KHÔNG ĐƯỢC ĐÈ LÊN CHỮ (user 2026-08-06: "khi hover thanh hover đè lên chữ ở khối
        tin mới nhất"). Bộ skin vẽ vạch hover bằng `::before { left: 6px; width: 3px }` — hợp với bản gốc
        vì tin còn đệm trái 15px; sau khi kéo chữ về sát mép khối (chuẩn 10px ở trên) thì vạch nằm ĐÈ chữ.
        Giữ đúng lối đã chốt cho bản điện thoại: **chỉ khi hover mới đẩy chữ sang phải** để chừa chỗ cho
        vạch, lúc thường bố cục nguyên vẹn. */
    /*  ⓪f5 NỀN HOVER (và vạch ngăn) CHẠY HẾT BỀ NGANG THẺ (user 2026-08-06: "background màu xám để
        full"). Tin nằm trong `.card-body` đệm 10px nên nền xám chỉ tô phần giữa, chừa hai mép trắng.
        Nới hộp tin ra hai bên đúng 10px rồi bù lại bằng đệm ⇒ CHỮ KHÔNG XÊ DỊCH, chỉ nền/vạch dài ra.
        Nhờ hộp rộng thêm, vạch hover (`::before` ở left:2px) nằm gọn trong vùng đệm ⇒ không còn phải
        đẩy chữ lúc hover như trước. */
    /*  🔑 CÁCH LÀM ĐÚNG (đã thử lề âm rồi bỏ): phần thân thẻ có `overflow` nên hộp tin nới ra bằng lề âm
        bị CẮT ở mép — đo được nền hụt 10px mỗi bên. Thay vào đó **bỏ đệm ngang của THÂN THẺ** và chuyển
        10px đó vào từng tin ⇒ nền/vạch chạy hết bề ngang thẻ, chữ vẫn thụt 10px như cũ. */
    .qirp .body-ct .card-body.qirp-hn-dong-deu,
    .qirp .body-ct .topnew,
    .qirp .body-ct .card-body:has(.heightvanban),
    .qirp .body-ct .card-body:has(.itemdocnhieu) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .qirp .body-ct .topnew .col.newitem,
    .qirp .body-ct .heightvanban > .col.d-grid {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
        max-width: none !important;
        /*  NỀN CHẠM TỚI VẠCH NGĂN (user 2026-08-06: "cho background full lên sát thanh ngăn cách 2 khối"):
            khoảng 10px phía dưới trước đây là `margin` — nền không tô vào margin nên còn dải trắng giữa
            chữ và vạch. Đổi cả hai khoảng 10px thành ĐỆM của chính tin, bỏ margin ⇒ nền phủ kín từ vạch
            trên xuống vạch dưới, khe nhìn thấy vẫn đúng 10px mỗi bên. */
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /*  Hàng bọc `.heightvanban` mang lề âm -5px ⇒ tin bị lệch trái 5px so với thân thẻ (đo: tin
        201..586 trong khi thân thẻ 206..591). Bỏ lề âm để tin bám đúng thân thẻ. */
    .qirp .body-ct .heightvanban {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .qirp .body-ct .itemdocnhieu {
        padding: 10px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }

    .qirp .body-ct .topnew .col.newitem::before,
    .qirp .body-ct .heightvanban > .col.d-grid::before,
    .qirp .body-ct .border-lr::before,
    .qirp .body-ct .border-lr2::before {
        left: 2px !important;
    }

    /*  ⓪f3 TIN NẰM TRONG KHUNG CÓ VIỀN (khối "Tin tức - sự kiện": `.border-lr`, `.border-lr2`,
        `.top-lv2-new` đều có viền 1px quanh mình) — chữ phải cách viền đúng **10px**; đo trước khi sửa
        chỉ **6px** hai bên (user 2026-08-06: "khoảng cách giữa tin với border của khối tin tức sự kiện
        chưa đúng 10px"). Có sẵn 10px rồi nên KHÔNG cần đẩy chữ lúc hover — vạch hover nằm ở 2–5px, cách
        chữ 5px, không đè. */
    .qirp .body-ct .border-lr,
    .qirp .body-ct .border-lr2,
    .qirp .body-ct .col.top-lv2-new {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /*  ⓪f4 CẢ CỘT TIN GIỮA LÀ **MỘT KHỐI, MỘT KHUNG VIỀN** — không phải mỗi tin một khung
        (user 2026-08-06: "cả vùng khoanh đỏ là 1 khối tin và chung 1 border chứ không phải mỗi tin 1
        border riêng… tin ảnh đầu đang dính vào border"). Bản gốc kẻ viền trái/phải/dưới cho TỪNG tin
        (`.border-lr`, `.top-lv2-new`) nên nhìn thành 5 cái hộp chồng nhau và ảnh tin đầu chạm sát viền.
        Nay: khung + bo góc + đệm 10px đặt ở thẻ BỌC, từng tin chỉ còn vạch ngăn 1px, tin cuối bỏ vạch. */
    .qirp .body-ct .hol-itct .row.row-cols-1:has(> .border-lr) {
        border: 1px solid #dbe3ec;
        border-radius: 10px;
        padding: 10px !important;
        background: #fff;
    }

    .qirp .body-ct .hol-itct .row.row-cols-1:has(> .border-lr) > .border-lr,
    .qirp .body-ct .hol-itct .row.row-cols-1:has(> .border-lr) > .col.top-lv2-new {
        border: 0 !important;
        border-bottom: 1px solid #e6ebf1 !important;
        border-radius: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .qirp .body-ct .hol-itct .row.row-cols-1:has(> .border-lr) > *:last-child {
        border-bottom: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /*  Trong khung nhóm, tin KHÔNG còn đệm trái (đệm 10px đã nằm ở thẻ bọc) ⇒ vạch hover ở `left: 2px`
        rơi ĐÈ LÊN CHỮ (user 2026-08-06: "hover bị đè lên chữ"). Kéo vạch ra vùng đệm của thẻ bọc. */
    .qirp .body-ct .hol-itct .row.row-cols-1:has(> .border-lr) > .border-lr::before,
    .qirp .body-ct .hol-itct .row.row-cols-1:has(> .border-lr) > .col.top-lv2-new::before {
        left: -8px !important;
    }

    /*  Cột tin thứ BA: hàng con mang lề âm -5px triệt tiêu đệm 5px của cột ⇒ ảnh dán sát khung nhóm bên
        trái (đo: khe chỉ **5px** thay vì 10px — user 2026-08-06 "khoảng cách chưa đúng 10px"). */
    .qirp .body-ct .hol-itct .row.row-cols-1:not(:has(> .border-lr)) {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /*  ⓪i NÚT "XEM TOÀN BỘ" / "XEM THÊM" Ở ĐẦU KHỐI — dạng pill cho gọn gàng (user: "chỉnh lại nút xem
        toàn bộ cho đẹp hơn"). Bản gốc chỉ là chữ 15px thường kèm icon »; nay viền bo tròn theo màu chữ
        của chính thanh tiêu đề (chạy đúng ở CẢ header nền xanh chữ trắng LẪN tiêu đề nền trắng chữ xanh),
        hover thì đổ nền. */
    .qirp .body-ct .g-title .text-more,
    .qirp .body-ct .b-title .text-more,
    .qirp .body-ct .card-header .more-ctsn,
    .qirp .body-ct .card-header .text-more {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 3px 14px;
        border: 1px solid currentColor;
        border-radius: 999px;
        font-size: 13.5px !important;
        font-weight: 600;
        line-height: 20px;
        text-decoration: none !important;
        transition: background-color .18s ease, color .18s ease, border-color .18s ease;
    }

    .qirp .body-ct .g-title .text-more:hover,
    .qirp .body-ct .b-title .text-more:hover {
        background: var(--mau-md, #004ccb);
        border-color: transparent;
        color: #fff !important;
    }

    /*  Trong THANH TIÊU ĐỀ NỀN XANH thì làm ngược lại cho NỔI BẬT (user 2026-08-06: "chỉnh lại nút xem
        thêm cho nổi bật và đẹp hơn"): nền trắng đặc, chữ màu đơn vị; hover thì rỗng ruột chữ trắng. */
    /*  🔑 Phải khai bằng ID `#MainContent` (1,2,0): bộ CSS Hà Nội ép `color:#fff !important` cho MỌI thẻ
        trong thanh tiêu đề xanh, chọn tử `.qirp .body-ct .card-header a` (0,4,0) vẫn thua khi cùng
        `!important` — đo được nút ra chữ trắng trên nền trắng (mất chữ). */
    #MainContent.qirp .body-ct .card-header .more-ctsn,
    #MainContent.qirp .body-ct .card-header .text-more,
    #MainContent.qirp .body-ct .card-header .more-ctsn i,
    #MainContent.qirp .body-ct .card-header .text-more i {
        background: #fff;
        border-color: #fff;
        color: var(--mau-md, #004ccb) !important;
    }

    #MainContent.qirp .body-ct .card-header .more-ctsn:hover,
    #MainContent.qirp .body-ct .card-header .text-more:hover,
    #MainContent.qirp .body-ct .card-header .more-ctsn:hover i,
    #MainContent.qirp .body-ct .card-header .text-more:hover i {
        background: transparent;
        border-color: #fff;
        color: #fff !important;
    }

    /*  ⓪j BA THẺ "Thông báo · Văn bản · Đọc nhiều nhất" BO GÓC GIỐNG KHỐI "Tin mới nhất"
        (user 2026-08-06). Khối mẫu: `border-radius: 10px` + viền 1px #ddd; ba thẻ này đang để 4px.
        `overflow: hidden` để thanh tiêu đề nền xanh bị cắt theo góc bo, không thò vuông ra ngoài. */
    .qirp .body-ct .card {
        border-radius: 10px !important;
        overflow: hidden;
    }

    /* icon »/mũi tên kép của bản gốc nhỏ lại cho cân với chữ trong pill */
    .qirp .body-ct .g-title .text-more i,
    .qirp .body-ct .card-header .more-ctsn i,
    .qirp .body-ct .card-header .text-more i { font-size: 11px; }

    /*  ⓪f BA CỘT HÀNG ĐẦU CAO BẰNG NHAU: chiều cao do `dongDeuHangDauHn()` trong qi-home-rp.js ghim
        (bằng khối slide); ở đây chỉ khai cách CHIA phần dư — `space-between` để khe giữa các tin đều
        nhau và đáy ba cột thẳng một đường, không còn dải trắng. */
    .qirp .body-ct .qirp-hn-khung { overflow: hidden; flex-wrap: nowrap !important; }

    /*  Thẻ NGOÀI của cột "Tin mới nhất": thanh tiêu đề giữ nguyên, phần thân co giãn nốt phần còn lại.
        🔴 `flex-wrap: nowrap` là BẮT BUỘC — thẻ này là một `.row` của Bootstrap (`flex-wrap: wrap`), mà
        flexbox hướng CỘT khi bị ghim chiều cao sẽ đẩy phần thừa **sang CỘT MỚI bên phải**: phần thân tin
        nhảy ra ngoài thẻ, nằm đè cột banner rồi bị `overflow:hidden` cắt ⇒ khối trông trắng trơn
        (đúng lỗi "tin mới nhất mất nội dung" user báo nhiều lần; ảnh DevTools cho thấy `.card-body`
        285×574 nằm ở x≈1548, ngoài hẳn thẻ). */
    .qirp .body-ct .qirp-hn-cot {
        display: flex !important;
        flex-direction: column;
        flex-wrap: nowrap !important;
        min-height: 0;
    }

    /*  🔑 XẾP TỪ TRÊN XUỐNG, KHÔNG `space-between`: chia đều phần dư làm khe giữa các tin phình to hơn
        10px (user 2026-08-06: "khoảng cách tin chưa đúng chuẩn 10px đến thanh border phía dưới").
        Khe giữ đúng 10px của chuẩn chung; dài hơn khung thì CUỘN. */
    .qirp .body-ct .qirp-hn-dong-deu {
        flex: 1 1 auto;
        min-height: 0;
        display: flex !important;
        flex-direction: column;
        justify-content: flex-start;
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .qirp .body-ct .qirp-hn-dong-deu::-webkit-scrollbar { width: 6px; }
    .qirp .body-ct .qirp-hn-dong-deu::-webkit-scrollbar-thumb { background: #c8d0da; border-radius: 3px; }

    .qirp .body-ct .qirp-hn-dong-deu > * { flex: 0 0 auto; }

    /*  Khối "Tin mới nhất": CUỘN khi tràn thay vì bỏ bớt tin (user chốt 2026-08-06). Thanh cuộn mảnh
        cho khỏi chiếm chỗ, và xếp từ trên xuống (space-between vô nghĩa khi nội dung dài hơn khung). */
    .qirp .body-ct .qirp-hn-cuon {
        justify-content: flex-start;
        overflow-y: auto !important;
        scrollbar-width: thin;
        /*  Chừa 10px ở ĐÁY vùng cuộn: nếu không, tin cuối bị cắt ngang ngay sát mép khối, nhìn như
            dính vào khối "Đọc nhiều nhất" bên dưới (user 2026-08-06). */
        padding-bottom: 10px !important;
    }

    .qirp .body-ct .qirp-hn-cuon::-webkit-scrollbar { width: 6px; }
    .qirp .body-ct .qirp-hn-cuon::-webkit-scrollbar-thumb { background: #c8d0da; border-radius: 3px; }

    /* tin bị ẩn vì không lọt trọn khung */
    .qirp .body-ct .qirp-hn-an { display: none !important; }

    /*  ⓪g KHE GIỮA SLIDE VÀ KHỐI TIN BÊN PHẢI = 10px (user 2026-08-06: "khoảng cách giữa slide ảnh và
        khối tin bên phải khá nhỏ, chưa đúng 10px"). Hàng đầu trang (`.row.ct-inside`) có cột mang lớp
        `padding0` nên chỉ còn đệm MỘT bên ⇒ đo được khe **5px**; và hàng con bên trong lại kéo lề âm
        -5px làm ảnh tràn ra đúng bằng phần đệm vừa đặt. */
    .qirp .body-ct .row.ct-inside > .col,
    .qirp .body-ct .row.ct-inside > [class*="col-"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .qirp .body-ct .row.ct-inside > .col > .row,
    .qirp .body-ct .row.ct-inside > [class*="col-"] > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /*  🔴 HÀNG ĐẦU CÓ NỀN TRẮNG (`bgwhite`) mà lại mang lề âm -5px của lưới ⇒ mảng nền **thò ra 5px**
        hai bên so với khung nội dung 1200px, hiện thành hai vệt trắng nhỏ ở mép trên (user 2026-08-06
        khoanh đỏ hai chỗ đó). Bỏ lề âm ở CHÍNH hàng này; khe 10px giữa các cột vẫn do đệm 5px+5px của
        các cột lo. */
    .qirp .body-ct .row.ct-inside {
        margin-left: 0 !important;
        margin-right: 0 !important;
        /*  Hàng này còn `padding: 1px 10px` của bộ CSS Hà Nội ⇒ cộng với đệm 5px của #MainContent và
            5px của cột thành **20px** ở hai mép ngoài (user 2026-08-06: "khoảng cách chưa đúng 10px").
            Bỏ đệm ngang của hàng ⇒ mép ngoài còn đúng 10px, khe giữa hai cột vẫn 5+5 = 10px. */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /*  🔑 THỦ PHẠM THẬT của hai vệt trắng: **`.body-ct` mang `margin: 0 -10px`** (kiểu nội tuyến của
        trang gốc) ⇒ cả vùng thân rộng 1220px trong khi `#MainContent` chỉ 1200 ⇒ hàng nền trắng thò ra
        5px mỗi bên. Bỏ lề âm đó ở trang rp (chỉ ≥992px) để mọi khối bám đúng khung 1200. */
    .qirp .body-ct {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /*  ⓪h MŨI TÊN CHUYỂN ẢNH CĂN GIỮA ĐÚNG KHUNG ẢNH (user: "icon chuyển ảnh trái phải chưa căn giữa
        với ảnh"). Nút của Bootstrap cao BẰNG CẢ KHỐI (đo: 530px ⇒ tâm ở y=492) trong khi ảnh chỉ cao
        335px (tâm y=400) nên mũi tên rơi xuống vùng chữ. Ghim hộp nút đúng khuôn ảnh bằng mẹo
        `height: 0 + padding-top: 56.25%` (tỉ lệ 16:9 tính theo BỀ RỘNG thẻ bọc — không cần biết số px),
        cộng 6px là phần `margin-top` của chính ảnh (`.item-ratio2`). */
    .qirp .body-ct .carousel-control-prev,
    .qirp .body-ct .carousel-control-next {
        top: 0;
        bottom: auto;
        height: 0;
        padding-top: 56.25%;
    }
}

/* ================= ①b MÁY TÍNH BẢNG NGANG / CỬA SỔ HẸP (≤1199.98px) =================
   Bộ CSS Hà Nội + vỏ desktop ghim CỨNG 1200px ở rất nhiều thẻ. Khoảng 992–1199px (đúng khổ iPad Pro
   dựng đứng 1024px) không rơi vào media query ≤991 nên toàn bộ trang vẫn rộng 1200px:
   đo ở 1014px được **tràn ngang 198px**, thanh trên (THPT · GDTX · KHỐI KHÁC) và chân trang thò hẳn
   ra ngoài khung trắng thành hai mảng xanh nhạt (user gửi ảnh iPad Pro 2026-08-05).
   ⚠️ iPadOS báo User-Agent là Macintosh ⇒ máy tính bảng nhận VỎ MÁY TÍNH, nên phải gỡ cho cả phần vỏ
   (`.qirp-vo-pc`) chứ không riêng thân trang. Từ 1200px trở lên GIỮ NGUYÊN bản desktop. */
@media only screen and (max-width: 1199.98px) {
    #MainContent { min-width: 0 !important; }

    .qirp,
    .qirp .body-ct,
    .qirp .body-ct .width100,
    .qirp .width1200, .qirp .width1275, .qirp .width1150,
    .qirp-vo-pc .container,
    .qirp-vo-pc .width1200, .qirp-vo-pc .width1275, .qirp-vo-pc .width1150,
    .qirp-vo-pc .navbar,
    .qirp-vo-pc .collapse.navbar-collapse,
    .qirp-vo-pc .header-second {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        /*  Vẫn CĂN GIỮA (user 2026-08-06: "header, menu và thanh chữ chạy lại không căn giữa như cũ"):
            gỡ bề rộng ghim 1200px là để không kéo ngang ở khổ 992–1199, nhưng phải giữ lề tự động,
            nếu không thanh trên/menu/chữ chạy dán sát mép trái trong khi thân trang vẫn căn giữa. */
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* thanh menu ngang: cho xuống dòng thay vì đẩy tràn ra ngoài */
    .qirp-vo-pc .navbar-nav { flex-wrap: wrap !important; }

    /* chân trang cũng dùng lưới 1200px của bộ CSS Hà Nội */
    .qirp-vo-pc .qifooter .container,
    .qirp-vo-pc #CenterFooter,
    .qirp-vo-pc #CenterFootermb {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /*  Bố cục 3 cột giữ nguyên ở khổ này, nhưng markup Hà Nội ghim CHIỀU CAO từng ô tin theo bề rộng
        1200px (`.row.row-cols-2 { height: 86px }` nội tuyến · `.divitemtop` 87px · `.height100` 60px);
        thu xuống 1014px thì chữ dài ra và **thò khỏi ô, đè lên tin kế tiếp** (đo được 56 phần tử tràn
        đáy). Gỡ chiều cao ghim cứng y như đã làm ở khổ ≤991. */
    .qirp .body-ct .divitemtop,
    .qirp .body-ct [class*="lv2-block"],
    .qirp .body-ct .divrelateCat,
    .qirp .body-ct .top-lv2-new,
    .qirp .body-ct .divitemtop > .row,
    .qirp .body-ct [class*="lv2-block"] > .row,
    .qirp .body-ct .height100,
    .qirp .body-ct .hnimgtop,
    .qirp .body-ct .hntexttop,
    .qirp .body-ct .col.divitemtop > .row.row-cols-2 {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    /*  🔴 Ô CHỨA TIÊU ĐỀ TIN bị ghim `height: 60px; overflow: hidden` (`.col.title-lv2`) — ở 1024px cột
        giữa chỉ còn ~153px nên tiêu đề dài 4–5 dòng và bị **CẮT NGANG GIỮA DÒNG**, dính vào dòng ngày
        (user gửi ảnh iPad Pro 2026-08-05: "bị nhảy dòng chữ"). Cho ô cao tự nhiên rồi cắt gọn bằng
        clamp 3 dòng như khổ điện thoại (JS `catTieuDeTheoTu` sẽ cắt theo TỪ và thêm dấu "…"). */
    .qirp .body-ct .title-lv2,
    .qirp .body-ct .titnew-lv2 {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .qirp .body-ct .txt-tplv2,
    .qirp .body-ct .txt-sl-lv2,
    .qirp .body-ct .txt-snipt,
    .qirp .body-ct .titnew-lv3,
    .qirp .body-ct .txt-ct,
    .qirp .body-ct .sut-lv2 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: normal;
    }

    /* ảnh tin nhỏ giữ khuôn 16:9 để không kéo cao ô khi bề rộng thu lại */
    .qirp .body-ct .hnimgtop a.ratio-16x9_pd { width: 100%; height: 100%; }

    .qirp .body-ct .hnimgtop img,
    .qirp .body-ct .divrelateCat img,
    .qirp .body-ct .top-lv2-new img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
}

/* ============================ ② KHỔ HẸP (≤991px) ============================ */
@media only screen and (max-width: 991.98px) {

    /* ---------- 1. GỠ BỀ RỘNG GHIM CỨNG ----------
       `#MainContent { min-width: 1200px }` có trong CẢ style2.css LẪN hanoi.css, mà thẻ bọc thân trang của
       layout rp mang đúng id đó ⇒ ở 430px nội dung vẫn rộng 1200px. Kèm các lớp bề rộng cố định của markup. */
    #MainContent { min-width: 0 !important; }

    .qirp .width1200, .qirp .width1275, .qirp .width1150, .qirp .width1000 {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* ---------- 2. LỀ HAI BÊN ĐÚNG 10px, KHỐI CĂN ĐỀU ----------
       Đo trước khi sửa: khối cách mép trái 5px nhưng mép phải 15px (`.row.ct-inside` còn `padding: 1px 10px`,
       `#MainContent` thì `padding: 10px 5px`). Chốt: chỉ #MainContent chịu trách nhiệm chừa lề 10px, mọi
       thẻ bọc bên trong về 0. */
    #MainContent.qirp {
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .qirp .body-ct,
    .qirp .body-ct > .width100 { margin: 0 !important; padding: 0 !important; }

    .qirp .body-ct .row.ct-inside { margin: 0 !important; padding: 0 !important; }

    /* ---------- 3. KHOẢNG CÁCH GIỮA CÁC KHỐI = 10px ----------
       `:not(:empty)` để dải quảng cáo đang tắt (thẻ rỗng) không tạo khe trống. Đặt cả margin-bottom = 0 cho
       chắc: hàng cuối trong khối có margin 16px, margin đó THOÁT ra ngoài và ĐÈ margin-top 10px của khối sau
       (margin collapse lấy số lớn hơn) ⇒ khe thành 16px. */
    .qirp .body-ct > .width100 > *:not(:empty) + *:not(:empty) { margin-top: 10px !important; }
    .qirp .body-ct > .width100 > * { margin-bottom: 0 !important; }
    .qirp .body-ct > .width100 > * > *:last-child { margin-bottom: 0 !important; }

    /* các khối con dạng "card" (Thông báo · Văn bản · Đọc nhiều nhất · Tin mới nhất) cũng 10px */
    .qirp .body-ct .qiContainer + .qiContainer,
    .qirp .body-ct .card + .card { margin-top: 10px !important; }

    .qirp .body-ct .qiContainer, .qirp .body-ct .card { margin-bottom: 0 !important; }

    /*  Card nằm trong `.col` riêng (Thông báo | Văn bản | Đọc nhiều nhất) nên KHÔNG là thẻ liền kề ⇒ đo được
        khe 0px. Cho các cột xếp dọc cách nhau 10px, TRỪ hàng của một tin (ảnh|chữ đã có column-gap 10px)
        và trừ hàng `row-cols-*` (đã có row-gap 10px) để không cộng dồn. */
    .qirp .body-ct .row:not([class*="row-cols-"]) > [class*="col"] + [class*="col"] { margin-top: 10px !important; }

    .qirp .body-ct .divitemtop > .row > * + *,
    .qirp .body-ct .divrelateCat > .row > * + *,
    .qirp .body-ct .top-lv2-new > .row > * + * { margin-top: 0 !important; }

    /*  ---------- THANH CUỘN CHIẾM LỀ PHẢI ----------
        Khung cuộn `.snap-content.qirp-snap` (vỏ mobile) có `overflow: auto`; trên trình duyệt máy tính và
        chế độ giả lập điện thoại, thanh cuộn DỌC chiếm 10px bề rộng nội dung ⇒ lề trái 10px mà lề phải
        thành 20px (đo được). Điện thoại thật dùng thanh cuộn dạng phủ nên không chiếm chỗ. Ẩn thanh cuộn
        để hai mép đều nhau ở mọi môi trường; vẫn cuộn bình thường bằng cử chỉ/bánh xe. */
    .qirp-snap { scrollbar-width: none; }
    .qirp-snap::-webkit-scrollbar { width: 0; height: 0; }

    /* ---------- 4. ẨN DẢI "CHUYÊN MỤC" GIỮA TRANG (trùng menu ☰) ---------- */
    .qirp-hn-chuyenmuc { display: none !important; }

    /* ---------- 5. "XEM THÊM / XEM TOÀN BỘ" → NÚT CUỐI KHỐI (xem mục 17) ----------
       Trước đây ẩn hẳn; user 2026-08-05 chốt làm GIỐNG bản mobile cũ `/homemb`: nút bo tròn nằm cuối
       khối. Kiểu dáng + vị trí ở mục 17. */

    /* ---------- 6. MỖI KHỐI / MỖI TIN MỘT DÒNG ----------
       Markup xếp ngang bằng `.col` (flex tự chia) và `col-xl-*` kèm bề rộng ghim trong style nội tuyến;
       `row-cols-2/3` của Bootstrap còn ghim `flex: 0 0 50%` bất kể bề rộng. `!important` thắng style nội tuyến. */
    .qirp .body-ct .row > .col,
    .qirp .body-ct .row > [class*="col-"],
    .qirp .body-ct [class*="row-cols-"] > * {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .qirp .body-ct .row,
    .qirp .body-ct .d-flex,
    .qirp .body-ct .d-xl-flex { flex-wrap: wrap !important; }

    /* khe dọc trong một tin (ảnh ↔ chữ) và giữa các tin = 10px; margin của ô con phải về 0 kẻo cộng dồn */
    .qirp .body-ct [class*="row-cols-"] { row-gap: 10px; }
    .qirp .body-ct [class*="row-cols-"] > * { margin-top: 0 !important; margin-bottom: 0 !important; }

    /* ---------- 7. GỠ CHIỀU CAO GHIM CỨNG CỦA TỪNG Ô TIN ----------
       Thủ phạm "chữ chèn lên ảnh": `.col.divitemtop` bị ghim height 87px trong khi ô ảnh cao 121px và ô chữ
       92px ⇒ 69 phần tử tràn đáy, đè lên tin kế tiếp. Kèm `height100` (60px), `hnimgtop`, `hntexttop`. */
    .qirp .body-ct .divitemtop,
    .qirp .body-ct [class*="lv2-block"],
    .qirp .body-ct .divrelateCat,
    .qirp .body-ct .top-lv2-new,
    .qirp .body-ct .divitemtop > .row,
    .qirp .body-ct [class*="lv2-block"] > .row,
    .qirp .body-ct .height100,
    .qirp .body-ct .hnimgtop,
    .qirp .body-ct .hntexttop {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    /* ---------- 8. TIN CÓ ẢNH ----------
       Tin ĐẦU khối: ảnh to ở trên, tiêu đề dưới (để nguyên xếp dọc).
       Các tin sau: ảnh 130px bên trái | chữ bên phải, khe 10px.
       ⚠️ CHỈ nhắm hàng CỦA MỘT TIN. KHÔNG nhắm `[class*="lv2-block"] > .row` (đó là DANH SÁCH nhiều tin):
       cho nó `nowrap` thì các tin nằm cạnh nhau ⇒ #MainContent scrollWidth 1577 / clientWidth 430,
       tràn ngang 1147px và `.snap-content` cho kéo ngang ⇒ trông như chữ và ảnh chèn nhau. */
    .qirp .body-ct .divrelateCat > .row,
    .qirp .body-ct .top-lv2-new > .row,
    .qirp .body-ct .divitemtop > .row {
        flex-wrap: nowrap !important;
        column-gap: 10px;
        row-gap: 0;
        align-items: flex-start;
    }

    .qirp .body-ct .divrelateCat > .row > *:first-child,
    .qirp .body-ct .top-lv2-new > .row > *:first-child,
    .qirp .body-ct .divitemtop > .row > *:first-child {
        flex: 0 0 130px !important;
        width: 130px !important;
        max-width: 130px !important;
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }

    .qirp .body-ct .divrelateCat > .row > *:last-child,
    .qirp .body-ct .top-lv2-new > .row > *:last-child,
    .qirp .body-ct .divitemtop > .row > *:last-child {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        padding-left: 0 !important;
    }

    /* danh sách tin phải xuống dòng */
    .qirp .body-ct [class*="lv2-block"] > .row,
    .qirp .body-ct .hol-itct .row { flex-wrap: wrap !important; }

    /*  🔴 Trong các khối lớn (`.hol-itct`), luật "xuống dòng" ngay trên ĐÈ luật "ảnh trái | chữ phải" ở
        mục 8 (cùng !important, specificity cao hơn) ⇒ ảnh 130px nằm MỘT MÌNH một dòng, bỏ trống nửa phải
        rồi tiêu đề mới xuống dòng dưới (user 2026-08-05: "tin có ảnh thì ảnh bên trái chữ bên phải để
        không tạo ra khoảng trống"). Khai lại ĐÚNG hàng của MỘT tin với specificity cao hơn.
        ⚠️ Vẫn KHÔNG nhắm `[class*="lv2-block"] > .row` — đó là DANH SÁCH nhiều tin, nowrap sẽ tràn ngang. */
    .qirp .body-ct .hol-itct .divrelateCat > .row,
    .qirp .body-ct .hol-itct .top-lv2-new > .row,
    .qirp .body-ct .hol-itct .divitemtop > .row {
        flex-wrap: nowrap !important;
        column-gap: 10px;
        row-gap: 0;
        align-items: flex-start;
    }

    .qirp .body-ct .hol-itct .divrelateCat > .row > *:first-child,
    .qirp .body-ct .hol-itct .top-lv2-new > .row > *:first-child,
    .qirp .body-ct .hol-itct .divitemtop > .row > *:first-child {
        flex: 0 0 130px !important;
        width: 130px !important;
        max-width: 130px !important;
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }

    .qirp .body-ct .hol-itct .divrelateCat > .row > *:last-child,
    .qirp .body-ct .hol-itct .top-lv2-new > .row > *:last-child,
    .qirp .body-ct .hol-itct .divitemtop > .row > *:last-child {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
        padding-left: 0 !important;
    }

    /* ảnh trong tin cùng một khuôn 16:9, ảnh thiếu/lỗi vẫn giữ đúng chỗ */
    .qirp .body-ct .divrelateCat img,
    .qirp .body-ct .top-lv2-new img,
    .qirp .body-ct .divitemtop img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .qirp .body-ct .divrelateCat a.ratio-16x9_pd,
    .qirp .body-ct .top-lv2-new a.ratio-16x9_pd,
    .qirp .body-ct .divitemtop a.ratio-16x9_pd { width: 100%; height: 100%; }

    /*  Ảnh tin LỚN (hero) không được trùm xuống tiêu đề: bản desktop đặt
        `.item-ratio2 { margin-top: 6px }` mà ảnh lại `position: absolute` phủ khung tỉ lệ ⇒ đáy ảnh thò ra
        6px và đè lên tiêu đề bên dưới (đo được giao nhau 6px — đúng chỗ user khoanh đỏ). */
    .qirp .body-ct .item-ratio2 { margin-top: 0 !important; }

    /*  KHE ẢNH ↔ TIÊU ĐỀ CỦA TIN LỚN = 10px (user 2026-08-05: "khoảng cách chữ và ảnh lớn").
        Trước đó đo được 51px = 10px margin của .caption2 + 20px padding-top của nó + 21px margin-top
        của thẻ <a class="top-title"> bên trong <h3>. Gỡ hai cái sau, giữ đúng 10px chuẩn. */
    .qirp .body-ct .caption2 {
        position: static !important;
        background: transparent !important;
        padding: 0 !important;
        margin-top: 10px !important;
    }

    /*  🔴 `.carousel-caption` của Bootstrap dành cho chữ ĐẶT TRÊN ẢNH nên có sẵn
        `color:#fff` + `text-shadow: 0 1px 2px rgba(0,0,0,.6)`. Bản rp đưa phần chữ XUỐNG DƯỚI ảnh (nền
        trắng) ⇒ bóng chữ làm tiêu đề/tóm tắt trông nhoè (user 2026-08-05: "đang bị bóng thì phải").
        Trả về chữ thường: bỏ bóng cho cả khối và mọi thẻ con, màu thừa kế thay vì trắng. */
    .qirp .body-ct .caption2,
    .qirp .body-ct .caption2 * {
        text-shadow: none !important;
    }

    .qirp .body-ct .caption2 { color: inherit !important; }

    .qirp .body-ct .caption2 > h3 { margin: 0 0 6px !important; }
    .qirp .body-ct .caption2 .top-title { margin-top: 0 !important; }

    /* ---------- 9. TIÊU ĐỀ KHỐI: MỘT CỠ ---------- */
    .qirp .body-ct .b-title-ev,
    .qirp .body-ct .b-title,
    .qirp .body-ct .bt-titct {
        font-size: 19px !important;
        font-weight: 700 !important;
        line-height: 26px !important;
    }

    /* ---------- 10. TIÊU ĐỀ TIN: MỘT CỠ, MỘT ĐỘ ĐẬM, TỐI ĐA 3 DÒNG ----------
       Cắt theo DÒNG nên không đứt giữa từ; phần cắt theo TỪ + dấu "…" do `catTieuDeTheoTu()` trong
       wwwroot/js/qi-home-rp.js lo (CSS không cắt được theo ranh giới từ). */
    .qirp .body-ct .txt-sl-lv2,
    .qirp .body-ct .txt-tplv2,
    .qirp .body-ct .txt-snipt,
    .qirp .body-ct .titnew-lv3,
    .qirp .body-ct .txt-ct,
    .qirp .body-ct .sut-lv2,
    .qirp .body-ct .top-title {
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 21px !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: normal;
    }

    /*  `.top-title` dùng cho CẢ tiêu đề tin lớn (hero) LẪN tiêu đề tin nhỏ trong danh sách. Trước đây nó
        bị gộp vào nhóm "tiêu đề KHỐI" (19px) nên tin nhỏ to bằng tên khối, lệch hẳn với các tin dùng
        `.txt-*` (15px) — user 2026-08-05: "chuẩn hoá tiêu đề khối tin cho thống nhất".
        ⇒ tin nhỏ về 15px như mọi tin khác, RIÊNG tin lớn của slide giữ 19px cho ra vai trò tin chính. */
    .qirp .body-ct .caption2 .top-title {
        font-size: 19px !important;
        line-height: 26px !important;
    }

    /* ---------- 11. NÚT ĐIỀU HƯỚNG SLIDE CĂN GIỮA *ẢNH* ----------
       Bản gốc để `.carousel-control-prev/next` cao BẰNG CẢ khối slide (ảnh + tiêu đề + tóm tắt = 472px)
       nên mũi tên rơi xuống vùng chữ trắng, vừa lệch vừa không nhìn thấy (mũi tên trắng trên nền trắng) —
       user 2026-08-05: "nút điều hướng tin không căn giữa ảnh".
       Cách ghim đúng chiều cao ảnh mà không cần biết số pixel: `height: 0 + padding-top: 56.25%` —
       padding theo % tính theo BỀ RỘNG thẻ bọc, đúng bằng khung ảnh 16:9 mà markup đang dùng
       (`a.ratio-16x9_pd`). Mũi tên (con) định vị tuyệt đối giữa vùng đó. */
    .qirp .body-ct .carousel-control-prev,
    .qirp .body-ct .carousel-control-next {
        top: 0 !important;
        bottom: auto !important;
        height: 0 !important;
        /* 🔴 PHẢI có !important (sửa 2026-08-11 — user báo "nút chuyển ảnh không căn giữa ảnh").
           Ba dòng trên đã ghim !important nhưng dòng này thì không, mà có bộ CSS khác zero hết padding
           của nút ⇒ đo được `padding-top: 0px`. Mất padding thì hộp tỉ lệ cao 0, nên mũi tên con định vị
           `top: 50%` rơi về đúng MÉP TRÊN ảnh (đo: icon y=157 trong khi ảnh bắt đầu y=173). */
        padding-top: 56.25% !important;
        opacity: 1;
    }

    .qirp .body-ct .carousel-control-prev-icon,
    .qirp .body-ct .carousel-control-next-icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        background-color: rgba(0, 0, 0, .35);
        background-size: 14px 14px;
        border-radius: 50%;
    }

    /* chấm chỉ số cũng đưa lên nằm trong ảnh (trước đây nằm đè lên phần tóm tắt, màu trắng trên nền
       trắng nên vừa không thấy vừa chắn chỗ bấm vào chữ) */
    .qirp .body-ct .carousel-indicators {
        top: 0 !important;
        bottom: auto !important;
        height: 0 !important;
        padding-top: 56.25%;
        margin-bottom: 0 !important;
        align-items: flex-end;
    }

    .qirp .body-ct .carousel-indicators li {
        transform: translateY(-18px);
        background-color: #fff !important;
    }

    /* ---------- 12. BỎ NỀN VÀ VIỀN CỦA CÁC KHỐI (user 2026-08-05) ----------
       Trên khổ hẹp, các lớp nền của bản desktop (`bg-cl` #f5f5f5, `bgwhite`/`white-back`/`card` trắng,
       dòng tin lẻ `#f8f8f8`) chỉ tạo ra các mảng màu chồng nhau chứ không còn phân tách được khối
       (mỗi khối đã chiếm trọn bề ngang). Bỏ hết cho phẳng; ranh giới khối do TIÊU ĐỀ + khe 10px lo. */
    /*  `.body-ct` — thẻ bọc TOÀN BỘ thân trang — có nền xám #f5f5f5 trong bộ CSS Hà Nội; đây chính là
        mảng xám còn sót sau khi đã bỏ nền từng khối (user 2026-08-05: "bỏ background ở tất cả các khối").
        Nền đứng sau nó là `#MainContent`/`.snap-content` màu trắng nên bỏ đi là ra nền trắng phẳng. */
    .qirp .body-ct,
    .qirp .body-ct .bg-cl,
    .qirp .body-ct .bgwhite,
    .qirp .body-ct .white-back,
    .qirp .body-ct .card,
    .qirp .body-ct .card-body,
    .qirp .body-ct .col.newitem,
    .qirp .body-ct .top-lv2-new,
    .qirp .body-ct .divrelateCat,
    .qirp .body-ct .divitemtop {
        background: transparent !important;
        background-image: none !important;
    }

    /*  Viền của từng tin con: bỏ để tin "ăn theo" khối lớn, chỉ giữ MỘT vạch mảnh ngăn cách giữa các tin
        (user 2026-08-05: "bỏ phần đường viền giữa các khối tin con để ăn theo khối tin lớn"). */
    .qirp .body-ct .card,
    .qirp .body-ct .card-body,
    .qirp .body-ct .divrelatetop,
    .qirp .body-ct .top-lv2-new,
    .qirp .body-ct .divrelateCat,
    .qirp .body-ct .divitemtop,
    .qirp .body-ct .white-back,
    .qirp .body-ct .hol-itct .col,
    .qirp .body-ct .hol-itct [class*="col-"] {
        border: 0 !important;
        box-shadow: none !important;
    }

    /* ---------- 13. TIÊU ĐỀ KHỐI: MỘT KIỂU DUY NHẤT ----------
       Markup có 2 kiểu đầu khối khác hẳn nhau: thanh xanh đặc `card-header.header-snip` (Thông báo ·
       Văn bản · Đọc nhiều nhất · Tin mới nhất) và dải chuyển màu `g-title.gradient-1` (Tin tức - sự kiện ·
       Phòng ban Sở …). Chốt một kiểu: KHÔNG nền, chữ hoa 19px/700 màu thương hiệu + gạch chân 2px. */
    .qirp .body-ct .card-header.header-snip,
    .qirp .body-ct .g-title {
        background: none !important;
        background-image: none !important;
        border: 0 !important;
        border-bottom: 2px solid #004ccb !important;
        border-radius: 0 !important;
        padding: 0 0 8px !important;
        margin: 0 0 10px !important;
        height: auto !important;
        min-height: 0 !important;
    }

    /*  Chữ tiêu đề: cùng cỡ/độ đậm/màu ở cả hai kiểu markup. `border: 0` để bỏ vạch xanh 3px bên trái của
        `.b-title-ev` (kiểu dải chuyển màu) — kiểu thanh xanh không có vạch này nên để lại là lệch nhau. */
    .qirp .body-ct .card-header.header-snip .bt-titct,
    .qirp .body-ct .g-title .b-title,
    .qirp .body-ct .g-title .b-title-ev,
    .qirp .body-ct .g-title .bt-titct {
        border: 0 !important;
        color: #004ccb !important;
        font-size: 19px !important;
        font-weight: 700 !important;
        line-height: 26px !important;
        padding: 0 !important;
        margin: 0 !important;
        text-transform: uppercase;
    }

    /* ---------- 14. LỀ TRÁI/PHẢI ĐỀU 10px ----------
       Lề 10px do `#MainContent.qirp` chịu (mục 2). Mọi gutter/padding của lưới Bootstrap bên trong phải về
       0, nếu không mỗi tầng `.col` lại cộng thêm 15px: đo được ảnh tin bắt đầu ở x=35 (lệch 25px so với
       ảnh tin lớn ở x=10) và mép phải hụt thêm một đoạn nữa (user 2026-08-05: "khoảng cách với mép trái
       lớn, chưa đúng 10px" · "căn khoảng cách đều giữa 2 bên"). */
    .qirp .body-ct .row { margin-left: 0 !important; margin-right: 0 !important; }

    /*  🔴 `bootstrap3.3.4.min.css` (vỏ mobile nạp) có clearfix `.row:before/.row:after{content:" ";
        display:table}`. Trong thẻ `display:flex` thì HAI pseudo đó thành FLEX ITEM: mỗi cái tuy rộng 0
        nhưng vẫn ăn thêm một khe `column-gap` ⇒ hàng ảnh|chữ bị thụt 10px mỗi bên (đo: ảnh bắt đầu ở
        x=20 thay vì 10, chữ hụt 20px bề rộng). Bố cục ở đây là flex/grid nên không cần clearfix. */
    .qirp .body-ct .row::before,
    .qirp .body-ct .row::after { display: none !important; }

    .qirp .body-ct .row > .col,
    .qirp .body-ct .row > [class*="col-"],
    .qirp .body-ct [class*="row-cols-"] > *,
    .qirp .body-ct .card-body,
    .qirp .body-ct .card-body > [class*="col"],
    .qirp .body-ct .top-lv2-new,
    .qirp .body-ct .divrelateCat,
    .qirp .body-ct .divitemtop {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ---------- 15. VẠCH NGĂN GIỮA CÁC TIN: TRÊN 10px — VẠCH — DƯỚI 10px ----------
       Nền xen kẽ đã bỏ ở mục 12 nên cần một vạch mảnh phân tách, và user chốt 2026-08-05: "khoảng cách
       trên và dưới của các tin so với thanh ngăn cách phải đều nhau = 10px, áp dụng cho TẤT CẢ khối tin".
       Cách làm cho đều tuyệt đối: khoảng TRÊN vạch = `padding-bottom: 10px` của chính tin, khoảng DƯỚI
       vạch = `row-gap: 10px` của danh sách (mục 6) ⇒ không phụ thuộc margin, không cộng dồn.
       ⚠️ Phải XOÁ HẾT đệm gốc của từng loại tin (9px · 6px · 16px · 20px · 1px — mỗi mẫu một kiểu), nếu
       không thì mỗi danh sách lại lệch một khác (đo trước khi sửa: trên vạch 20 · 24 · 36px, dưới 11px).
       Danh sách tin của "Tin mới nhất" nằm trong `.card-body` (không phải `.row`) nên không có row-gap
       ⇒ cho nó thành cột flex có khe 10px để dùng chung một luật. */
    .qirp .body-ct .card-body.topnew {
        display: flex;
        flex-direction: column;
        row-gap: 10px;
    }

    /*  🔑 PHẢI viết kèm `.col` cho đủ specificity: mục 12 có `.qirp .body-ct .hol-itct .col { border: 0 }`
        (0,4,0) — chọn tử ngắn hơn ở đây (0,3,0) sẽ THUA và tin trong khối lớn MẤT vạch ngăn
        (user 2026-08-05: "giữa 2 tin phải có đầy đủ ngăn cách" — đo được 12/12 `.divrelateCat`,
        4/4 `.top-lv2-new`, 11/11 `.itclhol` không có vạch). */
    .qirp .body-ct .col.divitemtop,
    .qirp .body-ct .topnew > .col.newitem,
    .qirp .body-ct .col.top-lv2-new,
    .qirp .body-ct .col.divrelateCat,
    .qirp .body-ct .col.itemdocnhieu,
    .qirp .body-ct .col.itclhol,
    .qirp .body-ct .col.d-grid {
        margin: 0 !important;
        padding: 0 0 10px !important;
        border: 0 !important;
        border-bottom: 1px solid #d7dbe0 !important;
    }

    /* tin CUỐI danh sách: không vạch, không đệm dưới (khe với khối sau đã là 10px) */
    .qirp .body-ct .col.divitemtop:last-child,
    .qirp .body-ct .topnew > .col.newitem:last-child,
    .qirp .body-ct .col.top-lv2-new:last-child,
    .qirp .body-ct .col.divrelateCat:last-child,
    .qirp .body-ct .col.itemdocnhieu:last-child,
    .qirp .body-ct .col.itclhol:last-child,
    .qirp .body-ct .col.d-grid:last-child {
        padding-bottom: 0 !important;
        border-bottom: 0 !important;
    }

    /*  TIN ẢNH CHÍNH (tin đầu khối: ảnh to trên, tiêu đề dưới) KHÔNG nằm trong danh sách tin nên không
        có vạch ngăn với các tin phía sau (user 2026-08-05: "chưa thấy vạch phân cách giữa tin ảnh chính
        và tin phía sau"). Nó là con TRỰC TIẾP của `.row.ct-inside` — cùng cấp với thẻ bọc danh sách tin
        ⇒ cho ô đứng sau một vạch + 10px đệm trên; khoảng trên vạch là margin-top 10px sẵn có (mục 3).
       ⚠️ Kẻ bằng `border-top` của ô ĐỨNG SAU (không phải border-bottom của ô trước) và BỎ QUA ô nào tự
       mở đầu bằng thanh tiêu đề khối (`.card-header`/`.g-title`) — chỗ đó đã có gạch chân của tiêu đề,
       thêm vạch nữa thành một thanh thừa ngay trên "TIN MỚI NHẤT" (user chỉ ra 2026-08-05). */
    .qirp .body-ct .row.ct-inside > [class*="col"] + [class*="col"]:not(:has(.card-header)):not(:has(.g-title)) {
        padding-top: 10px !important;
        border-top: 1px solid #d7dbe0 !important;
    }

    /*  Ô mở đầu bằng thanh tiêu đề (vd khối "TIN MỚI NHẤT" nằm trong khối trên cùng) thì thay vì vạch
        1px, dùng DẢI XÁM như ranh giới giữa các khối lớn — user 2026-08-05: "chưa có thanh phân tách
        với khối tin mới nhất". */
    .qirp .body-ct .row.ct-inside > [class*="col"] + [class*="col"]:is(:has(.card-header), :has(.g-title))::before {
        content: "";
        display: block;
        height: 8px;
        margin: 0 -10px 10px;
        background: #eef0f3;
    }

    /*  🔴 Danh sách Văn bản/Thông báo bị GHIM `height: 600px` (`.heightvanban`) ⇒ các tin là con flex bị
        KÉO GIÃN, mỗi tin thừa ~52px trống rồi mới tới vạch ngăn (đúng khoảng trắng user khoanh đỏ).
        Cho danh sách cao tự nhiên và tin xếp theo dòng thường thay vì lưới 3 hàng cố định. */
    .qirp .body-ct .heightvanban {
        height: auto !important;
        min-height: 0 !important;
    }

    .qirp .body-ct .col.d-grid { display: block !important; }

    /* vạch 1px sẵn có trong từng tin của danh sách văn bản — bỏ để không thành hai vạch */
    .qirp .body-ct .col.d-grid > .width100 { display: none !important; }

    /* ---------- 17. THEO ĐÚNG BẢN MOBILE CŨ `/homemb` (user chốt 2026-08-05, kèm ảnh) ----------
       Ba thứ lấy nguyên số đo từ `/homemb` (đo trực tiếp trên trang đang chạy):
       ① tiêu đề khối: vạch đứng 4px màu thương hiệu bên trái + gạch chân 2px #e6ebf1
          (`.HomeTopTitles`: padding 2px 0 9px 13px · margin-bottom 12px · ::before 4×19.75px);
       ② dải xám ngăn cách giữa hai khối (bản cũ là khe 14px giữa hai thẻ card nền trắng);
       ③ nút "Xem thêm" bo tròn cuối khối (`.xem-tiep`: viền 1px #004ccb · bo 999px · chữ 14.5px/700 ·
          đệm 11px 18px · cao 45px · chiếm trọn bề ngang). */

    /* ① vạch đứng + gạch chân nhạt cho CẢ hai kiểu đầu khối
       🔴 Vạch phải là pseudo INLINE của thẻ CHỮ, KHÔNG dùng `position:absolute` trên thẻ đầu khối:
       đặt `position:relative` lên `.g-title` biến nó thành gốc định vị của nút "Xem thêm" (mục ③ cũng
       absolute) ⇒ nút nhảy lên ĐÈ chính tiêu đề (đã dính lỗi này khi thử). */
    .qirp .body-ct .card-header.header-snip,
    .qirp .body-ct .g-title {
        padding: 2px 0 9px !important;
        margin: 0 !important;
        border-bottom: 2px solid #e6ebf1 !important;
        /* `.col` của Bootstrap vốn `position: relative` ⇒ vẫn là gốc định vị của nút "Xem thêm" bên
           trong nó. Phải trả về `static` để nút bám thẻ KHỐI (mục ③), không bám thanh tiêu đề. */
        position: static !important;
    }

    /*  KHE TỪ GẠCH CHÂN TIÊU ĐỀ XUỐNG TIN ĐẦU TIÊN = 10px (user 2026-08-05). Trước khi sửa: khối chuyên
        mục 30px · thẻ card 23px. Ba nguồn cộng dồn, phải xử lý riêng vì hai kiểu khối khác cấu trúc:
        ① `.g-title` và phần nội dung là hai ô của lưới có `row-gap: 10px` (mục 6) ⇒ tiêu đề để
           `margin-bottom: 0`, khe do gap lo; `.card-header` KHÔNG có gap nên tự đặt 10px ;
        ② `.hol-itct` (thẻ bọc nội dung khối chuyên mục) có `padding-top: 10px` ;
        ③ `.card-body` có `padding: 12.5px`. */
    .qirp .body-ct .card > .card-header.header-snip { margin-bottom: 10px !important; }

    /*  Khối "Tin mới nhất" KHÔNG bọc trong `.card`: thanh tiêu đề và phần nội dung là hai ô của
        `.row.row-cols-1.divrelatetop` — tức ĐÃ có `row-gap: 10px` ⇒ đặt thêm margin sẽ thành 20px
        (user 2026-08-05: "khoảng cách tin đầu tiên của khối tin mới nhất … vẫn chưa đúng 10px"). */
    .qirp .body-ct .row > .card-header.header-snip { margin-bottom: 0 !important; }

    .qirp .body-ct .col.hol-itct,
    .qirp .body-ct .card-body { padding-top: 0 !important; }

    /*  Nguồn thứ tư (chỉ khối "Tin mới nhất"): thẻ tiêu đề tin `a.txt-sl-lv2` có sẵn `margin-top: 10px`
        ⇒ tin đầu tiên bị đẩy thêm 10px nữa (tổng 20px). Khoảng cách giữa các tin nay do padding + gap
        của mục 15 lo nên margin này chỉ còn gây lệch. */
    .qirp .body-ct .txt-sl-lv2 { margin-top: 0 !important; }

    .qirp .body-ct .card-header.header-snip .bt-titct::before,
    .qirp .body-ct .g-title .b-title::before,
    .qirp .body-ct .g-title .b-title-ev::before,
    .qirp .body-ct .g-title .bt-titct::before {
        content: "";
        display: inline-block;
        width: 4px;
        height: 18px;
        margin-right: 9px;
        vertical-align: -2px;
        border-radius: 2px;
        background: #004ccb;
    }

    /* ② dải xám ngăn cách giữa các khối tin.
       Hai mức: giữa các KHỐI cấp cao nhất, VÀ giữa các thẻ card cùng nằm trong một khối
       (Thông báo | Văn bản | Đọc nhiều nhất — trước đó chỉ có khe 10px nên nhìn như một khối dài).
       ⚠️ `:has(> .card)` để KHÔNG kẻ nhầm giữa thanh tiêu đề và phần nội dung của khối chuyên mục
       (chúng cũng là hai `.col` liền kề trong cùng một `.row.white-back`).
       Dải vẽ bằng pseudo `::before` + `margin: 0 -10px` để TRÀN HẾT BỀ NGANG MÀN HÌNH (user 2026-08-05),
       trong khi thân khối vẫn giữ lề 10px — dùng `border-top` thì dải bị thụt đúng bằng lề của
       `#MainContent`, còn kéo âm cả khối thì phải bù padding cho mọi thứ bên trong. */
    .qirp .body-ct > .width100 > *:not(:empty) + *:not(:empty)::before,
    .qirp .body-ct .row.white-back > [class*="col"]:has(> .card) + [class*="col"]:has(> .card)::before {
        content: "";
        display: block;
        height: 8px;
        margin: 0 -10px 10px;
        background: #eef0f3;
    }

    /* ③ nút "Xem thêm" cuối khối — dùng LẠI thẻ <a> sẵn có trong markup (giữ đúng đường dẫn chuyên mục),
         chỉ đổi chỗ + đổi kiểu. Chữ gốc hai nơi hai kiểu ("Xem thêm" ↔ "Xem toàn bộ") nên thống nhất
         bằng `font-size: 0` + `::after` (không sửa được nội dung thẻ vì dùng chung với bản desktop). */
    .qirp .body-ct .row.white-back:has(> [class*="col"] > .text-more),
    .qirp .body-ct .card:has(.more-ctsn) {
        position: relative;
        padding-bottom: 55px !important;
    }

    .qirp .body-ct .text-more,
    .qirp .body-ct .more-ctsn {
        display: block !important;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 11px 18px !important;
        border: 1px solid #004ccb !important;
        border-radius: 999px !important;
        background: #fff !important;
        color: #004ccb !important;
        text-align: center;
        font-size: 0 !important;
        line-height: 1 !important;
        text-decoration: none;
    }

    .qirp .body-ct .text-more::after,
    .qirp .body-ct .more-ctsn::after {
        content: "Xem thêm  →";
        font-size: 14.5px;
        font-weight: 700;
        line-height: 21px;
    }

    /* bỏ icon "»" của bản cũ (bản mobile mới dùng mũi tên trong nhãn) */
    .qirp .body-ct .text-more i,
    .qirp .body-ct .more-ctsn i { display: none !important; }

    /*  Khối "Đọc nhiều nhất" KHÔNG có trang danh sách: bản cũ để `href="/"` (bấm vào ra trang chủ).
        Ẩn nút của riêng khối đó thay vì dẫn người đọc đi lòng vòng. */
    .qirp .body-ct .more-ctsn[href="/"] { display: none !important; }

    .qirp .body-ct .card:has(> .card-header > .more-ctsn[href="/"]) { padding-bottom: 0 !important; }

    /* ---------- 16. CHÂN TRANG MOBILE của tenant Hà Nội ----------
       `div#CenterFootermb.container` bị ghim `min-width: 1200px` ⇒ nội dung chân trang 1230px, bị cắt. */
    #CenterFootermb, .qifootermobile .container {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .qifootermobile .row { margin-left: 0 !important; margin-right: 0 !important; }
    .qifootermobile [class*="col-"] { max-width: 100% !important; flex: 0 0 100% !important; }
}

/* /App_Themes/all/allcss/qiUserLogin.css */
.open-chat-btn {
    position: fixed;
    bottom: 150px;
    right: 20px;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    z-index: 100000;
}

    .open-chat-btn:hover {
        background-color: #0056b3;
    }

/* Popup chat */
.chat-popup {
    display: none; /* Ẩn popup mặc định */
    position: fixed;
    bottom: 200px; /* Cách nút 60px */
    right: 20px;
    width: 380px;
    height: 450px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1100;
    overflow: hidden;
}

/* Header của popup */
.chat-header {
    background-color: #007bff;
    color: white;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    position: relative;
}

/* Nút đóng trong popup */
.close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    background: none;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

    .close-btn:hover {
        color: #ffdddd;
    }

.login-web {
    position: fixed;
    bottom: 150px;
    right: 20px;
    z-index: 9000;
    background: #006ab0;
    padding: 5px;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
a:focus-visible {
    outline: none !important;
}

.qibgmenutop .pt-1 {
    padding-top: 5px !important;
}

.goog-te-combo {
    border: 1px solid #ddd !important;
    padding: 2px 10px;
    border-radius: 5px;
}

select:focus-visible {
    outline: 1px solid #ddd !important;
}

.skiptranslate {
    width: 0px !important;
    height: 0px !important;
}

body {
    top: 0px !important;
}

.VIpgJd-ZVi9od-aZ2wEe-wOHMyf.VIpgJd-ZVi9od-aZ2wEe-wOHMyf-ti6hGc {
    width: 0px !important;
    height: 0px !important;
    display: none !important;
}

#goog-gt-tt {
    display: none !important;
}

#google_translate_element {
    bottom: 0px !important;
    position: fixed;
}

.infoFooter {
    text-wrap: balance;
}

.zalo-chat-widget {
    bottom: 80px !important;
    right: 20px !important;
    /*left: auto !important;*/
    visibility: visible !important;
    /*position: fixed !important;*/
}