/* ==========================================================================
   Trang danh sach tin - clone bo cuc news_list.html cua ban goc.

   Toa do lay nguyen tu CSS goc:
     .mid       1200px, can giua
     .page-cont padding 382px 0 0 226px
     .page-top  974x85, nen innner-tit-bg.jpg
     .new-tit   156x46, margin 17px 0 0 30px
     .local     padding 34px 0 0 64px
     .news-nav  float right, padding 27px 35px 0 0; nut 62x30
     .list-item cao 72px, cach nhau 16px; .txt rong 798px
   Giu nguyen tren desktop, thu gon lai tu 1024px tro xuong.

   LUU Y: tat ca class deu mang tien to "nl-" vi site.css da dung .news-nav,
   .nav-item, .news-body, .time, .txt cho khoi tin o trang chu.
   Rieng .el-pagination la co y dung lai cua site.css cho dong bo voi trang chu.
   ========================================================================== */

/* padding-bottom 470px la so cua ban goc: chua vua dai chan trang cao 368px
   cong khoang ho ~100px giua danh sach va dai do. */
.nl-page {
    position: relative;
    overflow: hidden;
    background: #fff url("../assets/images/inner-bg.jpg") no-repeat center top;
    padding-bottom: 470px;
}

/* Khung ngang bam theo .container mac dinh cua site.css (--maxw + padding 20px)
   thay vi .mid 1200px cua ban goc, de trang tin thang hang voi cac trang khac. */
.nl-mid {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

/* Banner cua ban h5 - chi bat o khoi @media ben duoi. */
.nl-banner {
    display: none;
}

/* ---------- Logo + nut ve trang chu (dat tuyet doi nhu ban goc) ---------- */

.nl-logo {
    display: block;
    width: 212px;
    height: 91px;
    position: absolute;
    top: 77px;
    left: 20px;
    z-index: 5;
}

.nl-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Ban goc dung sprite sp.png (-950px -338px) co chu Trung Quoc nen dung lai
   bang CSS, giu dung kich thuoc va tone xanh cua nut goc. */
.nl-back {
    position: absolute;
    top: 60px;
    right: 20px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 139px;
    height: 46px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .5px;
    color: #f0e6cd;
    background: linear-gradient(180deg, #55657e, #313d51);
    border: 1px solid #93a6bf;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(20, 30, 45, .28);
    transition: filter .3s;
}

.nl-back:hover {
    filter: brightness(1.18);
}

/* ---------- Khoi noi dung ---------- */

/* ---------- Bang tai game ben trai (.game-down ban goc) ---------- */

/* 216x526, top 382px - dung bang do lech doc cua .nl-cont nen dinh bang thang
   hang voi thanh tieu de. left: 20px = mep trong cua .container. */
.nl-down {
    position: absolute;
    top: 382px;
    left: 20px;
    width: 216px;
    height: 526px;
    z-index: 4;
    background: url("../assets/images/game-down-bg.png") no-repeat;
}

/* Ban goc an dong nay (text-indent: -999em) vi chu da nung san trong anh nen.
   Anh nen o day da duoc xoa dong chu Trung Quoc do, nen hien chu that. */
.nl-down-tit {
    height: 44px;
    margin: 0;
    line-height: 44px;
    text-align: center;
    font-family: var(--font-head);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .5px;
    color: #ae8537;
}

.nl-down-qr {
    position: relative;
    margin-top: 10px;
}

.nl-down-qr-img {
    width: 190px;
    height: 190px;
    margin: 0 auto;
    border: 1px solid #e1c786;
    background: #fff;
}

/* Vach quet chay tu tren xuong 170px roi lap lai - dung keyframes mymove2 goc. */
.nl-down-light {
    position: absolute;
    top: 10px;
    left: 3px;
    width: 208px;
    height: 10px;
    background: url("../assets/images/line2.png") no-repeat;
    animation: nl-scan 2s ease infinite;
}

@keyframes nl-scan {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(170px);
    }
}

/* Khong dat background-image o rule chung: no co do uu tien cao hon .nl-btn-*
   nen se ghi de anh nen rieng cua tung nut. */
.nl-down-btns a {
    display: block;
    margin: 7px auto 0;
    background-repeat: no-repeat;
    transition: filter .3s;
}

.nl-down-btns a:hover {
    filter: brightness(1.1);
}

/* Hai nut tren: anh goc trong sprite sp.png (-827/-1029, -202) co chu Trung Quoc
   nen da tach ra file rieng va xoa phan chu, giu nguyen icon va nen gradient.
   Chu tieng Viet do HTML ve de len, chua 52px ben trai cho icon. */
.nl-btn-adr,
.nl-btn-ios {
    width: 190px;
    height: 58px;
    padding-left: 52px;
    line-height: 58px;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(90, 55, 10, .35);
}

.nl-btn-adr {
    background-image: url("../assets/images/nl-btn-android.png");
}

.nl-btn-ios {
    background-image: url("../assets/images/nl-btn-ios.png");
}

/* Hai nut duoi la khung rong trong sprite + chu that, giong het cach ban goc lam. */
.nl-btn-txt {
    width: 200px;
    height: 68px;
    background-image: url("../assets/images/sp.png");
    background-position: -1025px -122px;
    margin-top: 4px;
    margin-bottom: -6px;
    line-height: 62px;
    text-align: center;
    font-size: 20px;
    color: #fdf3df;
}

/* ---------- Khoi noi dung ---------- */

/* Lui vao 226px = 216px bang tai game + 10px khe ho, dung nhu ban goc. */
.nl-cont {
    padding: 382px 0 0 226px;
    position: relative;
}

/* ---------- Thanh tieu de ---------- */

/* Anh nen goc rong 974px - keo gian theo be ngang khoi noi dung. Day chi la
   mot dai mau nen keo ngang khong lo meo. */
.nl-head {
    width: 100%;
    height: 85px;
    overflow: hidden;
    background: url("../assets/images/innner-tit-bg.jpg") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: flex-start;
}

/* Ban goc la anh news-tit.png (chu Trung Quoc) - thay bang chu that de Viet hoa,
   giu nguyen o 156x46 va mau chu #8b6f2b lay tu chinh anh do. */
.nl-tit {
    flex: 0 0 156px;
    margin: 15px 0 0 30px;
    font-family: var(--font-head);
}

.nl-tit-vn {
    display: block;
    font-size: 29px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
    color: #8b6f2b;
}

.nl-tit-en {
    display: block;
    margin-top: 4px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #95772e;
    opacity: .75;
}

/* Flex + min-width:0 de muc cuoi (ten bai viet) co the co lai va hien dau ba
   cham, thay vi day dai ra roi bi .nl-head cat cut. */
.nl-crumb {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
    padding: 34px 0 0 64px;
    font-size: 14px;
    color: #7c6316;
    white-space: nowrap;
}

/* Trang danh sach: breadcrumb ngan va co dinh, khong cho flex bop lai - neu
   thieu cho thi @media ben duoi an han di chu khong bop den mat chu. */
.nl-page-list .nl-crumb {
    flex: 0 0 auto;
}

.nl-crumb a,
.nl-crumb span {
    color: #a28e51;
}

.nl-crumb a:hover {
    text-decoration: underline;
}

/* Muc cuoi breadcrumb la ten bai viet o trang chi tiet - co the rat dai nen cat
   bot bang dau ba cham thay vi day tran ra khoi thanh tieu de. */
.nl-crumb em {
    min-width: 0;
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: normal;
}

.nl-nav {
    display: flex;
    flex-direction: row;
    margin-left: auto;
    padding: 27px 35px 0 0;
}

.nl-tab {
    min-width: 62px;
    height: 30px;
    padding: 0 10px;
    line-height: 28px;
    font-size: 16px;
    color: #a28e51;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    transition: .2s;
    white-space: nowrap;
}

.nl-tab.cur,
.nl-tab:hover {
    color: #7d6d3d;
    border-color: #a28e51;
    background: #d6c28c;
}

/* ---------- Danh sach tin ---------- */

.nl-body {
    min-height: 340px;
}

.nl-item {
    height: 72px;
    line-height: 72px;
    margin-top: 16px;
}

.nl-link {
    position: relative;
    display: block;
    height: 72px;
    line-height: 72px;
    overflow: hidden;
    background: #f7f1e1;
    font-size: 16px;
    color: #978963;
    transition: all .3s;
}

.nl-time {
    display: inline-block;
    vertical-align: top;
    color: #b29d7c;
    margin: 0 44px 0 30px;
    transition: all .3s;
}

/* Ban goc: .txt 798px trong dong rong 974px, tuc chua 176px cho cot ngay va
   khoang du de chu truot sang phai 45px khi hover. Giu dung khoang du do. */
.nl-txt {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 176px);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: all .3s;
}

.nl-link:hover {
    color: #84754c;
    background: #f3e6c3;
}

.nl-link:hover .nl-time,
.nl-link:hover .nl-txt {
    transform: translateX(45px);
}

.nl-link:hover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 72px;
    background: url("../assets/images/news-ico2.png") no-repeat;
}

/* Ban goc cach danh sach 45px truoc phan trang. */
.nl-cont .el-pagination {
    margin-top: 45px;
}

/* ==========================================================================
   Trang chi tiet tin (.news-deial-wp cua ban goc)
   Toa do goc: bo cuc thut hai ben 58px, day 28px
               tieu de canh giua, padding 36/26, gach duoi 1px #a89f90
               than bai min-height 600px, padding 30/70, line-height 26
               nut dieu huong 62x30, vien 1px
   ========================================================================== */

.nl-article {
    padding: 0 58px 28px;
}

.nl-article-head {
    padding: 36px 0 26px;
    text-align: center;
    border-bottom: 1px solid #a89f90;
}

/* Ban goc dat .elips cat tieu de con 1 dong. Tieu de bai viet thi nen doc duoc
   day du nen o day cho xuong dong. */
.nl-article-tit {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: #7b6c57;
}

.nl-article-meta {
    margin-top: 16px;
    font-size: 12px;
    color: #a79f92;
}

/* Ban goc dung mau chu #a79f92, rat nhat tren nen gan trang. Doi sang #7b6c57
   (cung bang mau goc, la mau cua tieu de va link) cho de doc ca bai dai. */
.nl-article-body {
    min-height: 600px;
    padding: 30px 0 70px;
    line-height: 26px;
    color: #7b6c57;
}

.nl-article-body p {
    margin: 4px 0 14px;
}

.nl-article-body img,
.nl-article-body iframe {
    max-width: 100%;
}

.nl-article-body a {
    color: #7b6c57;
    text-decoration: underline;
    transition: filter .3s;
}

.nl-article-body a:hover {
    filter: brightness(1.2);
}

/* ==========================================================================
   Dai chan trang (.page-bot ban goc)
   Ban goc: width 1920px; left 50%; margin-left -960px de can giua anh nen.
   O day dung khoi rong het be ngang + background-position center - ket qua
   giong het nhung khong lam tran ngang tren man hinh hep hon 1920px.
   ========================================================================== */

.nl-bot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 368px;
    background: url("../assets/images/page-bot-bg.png") no-repeat center top;
}

.nl-bot-in {
    display: flex;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 106px 20px 0;
}

/* ---------- QR ---------- */

.nl-bot-qr {
    position: relative;
    flex: 0 0 145px;
    width: 145px;
    height: 181px;
    margin: 0 50px 0 40px;
    background: url("../assets/images/bot-ewm-bg2.png") no-repeat;
}

.nl-bot-qr-img {
    position: absolute;
    top: 7px;
    left: 7px;
    width: 129px;
    height: 129px;
    border: 1px solid #cab87f;
    background: #fff;
}

/* Vach quet chay xuong 120px roi lap lai - keyframes mymove3 cua ban goc. */
.nl-bot-light {
    position: absolute;
    top: 10px;
    left: -2px;
    width: 148px;
    height: 10px;
    background: url("../assets/images/line3.png") no-repeat;
    animation: nl-scan-bot 2s ease infinite;
}

@keyframes nl-scan-bot {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(120px);
    }
}

.nl-bot-qr-txt {
    position: absolute;
    top: 146px;
    left: 0;
    width: 100%;
    margin: 0;
    text-align: center;
    font-size: 14px;
    color: #5a4d2d;
}

/* ---------- Gioi thieu game ---------- */

.nl-bot-info {
    width: 590px;
}

.nl-bot-tit {
    margin: 14px 0 25px;
    font-size: 20px;
    font-weight: 700;
    color: #b29d7c;
}

.nl-bot-desc {
    margin: 0;
    font-size: 14px;
    line-height: 24px;
    color: #b29d7c;
}

/* ==========================================================================
   Man hinh hep - ban goc chi co ban PC (min-width 1200px) nen phan duoi day
   la bo cuc thu gon rieng, khong phai clone.
   ========================================================================== */

@media (max-width: 1024px) {
    .nl-page {
        background-size: 1400px auto;
        padding-bottom: 60px;
    }

    .nl-logo,
    .nl-back {
        position: static;
    }

    .nl-logo {
        width: 150px;
        height: 64px;
        padding-top: 20px;
    }

    .nl-back {
        width: 120px;
        height: 38px;
        font-size: 13px;
        margin: 12px 0 0 auto;
    }

    /* Ban goc chi co ban PC nen bang tai game khong co cho tren man hinh hep;
       thanh dau trang mobile da co san nut tai roi. */
    .nl-down {
        display: none;
    }

    .nl-cont {
        padding: 20px 0 0;
    }

    .nl-head {
        height: auto;
        flex-wrap: wrap;
        padding-bottom: 12px;
    }

    .nl-tit {
        margin: 12px 0 0 16px;
    }

    .nl-tit-vn {
        font-size: 24px;
    }

    /* Cho breadcrumb chiem tron mot dong: ten bai viet dai khong con cho neu
       phai chia dong voi thanh tieu de. */
    .nl-crumb {
        flex: 0 0 100%;
        padding: 14px 16px 0;
        font-size: 13px;
    }

    .nl-nav {
        flex: 0 0 100%;
        margin: 10px 0 0;
        padding: 0 16px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .nl-tab {
        min-width: 0;
        font-size: 14px;
    }

    .nl-item,
    .nl-link {
        height: auto;
        line-height: 1.45;
    }

    .nl-link {
        padding: 14px 16px;
        font-size: 14px;
    }

    .nl-time {
        display: block;
        margin: 0 0 4px;
        font-size: 13px;
    }

    .nl-txt {
        display: block;
        width: 100%;
        white-space: normal;
    }

    /* Bo hieu ung truot ngang vi tren mobile khong co con tro. */
    .nl-link:hover .nl-time,
    .nl-link:hover .nl-txt {
        transform: none;
    }

    .nl-link:hover::before {
        display: none;
    }

    .nl-cont .el-pagination {
        margin-top: 24px;
    }

    /* ---------- Trang chi tiet ---------- */

    /* Tren desktop bai viet bat dau o do sau ma anh nen da trang han nen de trong
       nhu ban goc. Tren mobile noi dung day len cao, dam vao phan con mau cua anh
       nen, nen phai lot mot lop nen mo cho de doc. */
    .nl-article {
        padding: 0 16px 20px;
        background: rgba(255, 255, 255, .86);
    }

    .nl-article-head {
        padding: 22px 0 18px;
    }

    .nl-article-tit {
        font-size: 17px;
    }

    .nl-article-body {
        min-height: 0;
        padding: 20px 0 32px;
        line-height: 24px;
    }

    .nl-crumb em {
        max-width: 100%;
    }

    /* Dai chan trang tro ve dong chay binh thuong. Bo anh nen vi bo cuc nhan vat
       trong anh 1920px khong con doc duoc o be ngang nay. */
    .nl-bot {
        position: static;
        height: auto;
        margin-top: 28px;
        background: none;
        border-top: 1px solid #e6d8b0;
    }

    .nl-bot-in {
        display: block;
        padding: 26px 20px 0;
    }

    .nl-bot-qr {
        margin: 0 auto;
    }

    .nl-bot-info {
        width: auto;
        margin-top: 26px;
    }

    .nl-bot-tit {
        margin: 0 0 12px;
        font-size: 18px;
    }
}

/* ==========================================================================
   BAN MOBILE CUA TRANG DANH SACH TIN - clone theo h5/news_list.html

   Ban goc dung rem voi html{font-size:100px} tren khung thiet ke 7.5rem (750px);
   o day quy sang var(--r) cua site.css (= min(100vw/7.5, 109px)) nen 1rem goc
   tuong ung calc(1 * var(--r)).

   So do goc:
     .header-comm       cao 3.58rem; :after la dai banner-ico 7.5x0.17rem, bottom -0.12rem
     .back-home         1.41x0.52rem
     .page-top .news-nav  cao 1.03rem, nen news-innernav-bg.png, margin-top -0.12rem
     .nav-item          flex-basis 24%, font 0.28rem, line-height 1.17rem, mau #b29d7c
     .nav-item.cur      #92752d dam; :after la news-cur.png 1.31x0.28rem tai top 0.925rem
     .news-p-list       margin-top 0.26rem
     .list-item         margin-bottom 0.15rem
     .links             flex space-between, padding 0.3rem, nen #f7f5ef, font 0.26rem
     .links .txt        dung TRUOC .time (nguoc voi ban PC)

   Khong lam .down-more ("tai them") - giu phan trang san co.
   Chi ap cho trang danh sach (.nl-page-list); trang chi tiet giu nguyen.
   ========================================================================== */

@media (max-width: 1024px) {

    /* Ban h5 co body{padding-top:0} nen banner bat dau ngay y=0 va bi thanh dau
       trang fixed (cao 1.14rem) che mat phan tren - chi lo ra 2.44rem duoi.
       site.css cua minh chua san 1.14rem cho thanh do, nen phai keo nguoc lai
       dung bay nhieu thi banner moi nam dung khung nhu ban goc. */
    .nl-page-list,
    .nl-page-detail {
        margin-top: calc(-1.14 * var(--r));
        background: #fff;
        padding-bottom: calc(.3 * var(--r));
    }

    /* ---------- Banner dau trang (.header-comm) ----------
       Y het nhau o ca hai trang; ban goc chi khac dich cua nut quay lai
       (.back-home ve trang chu / .back-list ve danh sach). */

    .nl-banner {
        display: block;
        position: relative;
        width: 100%;
        max-width: calc(7.5 * var(--r));
        height: calc(3.58 * var(--r));
        margin: 0 auto;
    }

    .nl-banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .nl-banner::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: calc(-.12 * var(--r));
        width: 100%;
        height: calc(.17 * var(--r));
        background: url("../assets/images-h5/banner-ico.png") no-repeat;
        background-size: 100% auto;
    }

    /* top 1.14rem, left 0 dung nhu ban goc: nut nam sat ngay duoi thanh dau trang.

       Anh goc back-home.png co chu Trung Quoc nung tren nen hoa van giay nen
       khong xoa sach duoc; dung lai bang CSS theo dung kich thuoc 1.41x0.52rem
       va bang mau cua chinh anh do (#fff1c9 / #b29d7c). Bo vien trai + bo goc
       mot ben de giu cam giac dai ruy bang an ra khoi mep nhu anh goc. */
    .nl-banner-back {
        position: absolute;
        top: calc(1.14 * var(--r));
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(1.41 * var(--r));
        height: calc(.52 * var(--r));
        font-size: calc(.2 * var(--r));
        font-weight: 600;
        color: #7a5f2a;
        background: rgba(255, 241, 201, .92);
        border: 1px solid #b29d7c;
        border-left: none;
        border-radius: 0 calc(.06 * var(--r)) calc(.06 * var(--r)) 0;
    }

    /* ---------- Khung ---------- */

    /* Banner thay cho logo + nut ve trang chu cua ban PC. */
    .nl-page-list .nl-logo,
    .nl-page-list .nl-back,
    .nl-page-detail .nl-logo,
    .nl-page-detail .nl-back {
        display: none;
    }

    .nl-page-list .nl-mid,
    .nl-page-detail .nl-mid {
        max-width: calc(7.5 * var(--r));
        padding: 0;
    }

    .nl-page-list .nl-cont,
    .nl-page-detail .nl-cont {
        padding: 0;
    }

    /* ---------- Thanh tab (.page-top .news-nav) ---------- */

    /* Ban h5 khong co thanh tieu de vang lan breadcrumb, chi con hang tab. */
    /* overflow: visible de gach news-cur.png duoi tab dang chon - von nho ra
       khoi day thanh nav dung nhu ban goc - khong bi cat. */
    .nl-page-list .nl-head,
    .nl-page-detail .nl-head {
        display: block;
        height: auto;
        padding: 0;
        overflow: visible;
        background: none;
    }

    .nl-page-list .nl-tit,
    .nl-page-list .nl-crumb,
    .nl-page-detail .nl-tit,
    .nl-page-detail .nl-crumb {
        display: none;
    }

    .nl-page-list .nl-nav {
        display: flex;
        justify-content: space-between;
        gap: 0;
        width: 100%;
        height: calc(1.03 * var(--r));
        margin: calc(-.12 * var(--r)) 0 0;
        padding: 0 calc(.1 * var(--r));
        background: url("../assets/images-h5/news-innernav-bg.png") no-repeat;
        background-size: 100% auto;
    }

    /* Ban goc chia deu 24% cho 4 muc. Nay co 6 muc nhan tieng Viet dai ngan khac
       nhau, chia deu thi "Hướng dẫn" tran o - nen de tab tu co theo chu roi giai
       deu khoang trong, kem ha co chu mot nac. */
    .nl-page-list .nl-tab {
        flex: 0 1 auto;
        min-width: 0;
        height: auto;
        margin: 0;
        padding: 0 calc(.06 * var(--r));
        border: none;
        background: none;
        position: relative;
        text-align: center;
        line-height: calc(1.17 * var(--r));
        font-size: calc(.22 * var(--r));
        color: #b29d7c;
        white-space: nowrap;
    }

    .nl-page-list .nl-tab:hover {
        border: none;
        background: none;
        color: #b29d7c;
    }

    .nl-page-list .nl-tab.cur,
    .nl-page-list .nl-tab.cur:hover {
        font-weight: 700;
        color: #92752d;
        border: none;
        background: none;
    }

    /* Ban goc co dinh 1.31rem cho o rong 1.875rem (24%). O rong gio chi con
       1/6 khung nen cho gach co theo o - background-size: contain giu ty le anh. */
    .nl-page-list .nl-tab.cur::after {
        content: "";
        position: absolute;
        top: calc(.925 * var(--r));
        left: 10%;
        right: 10%;
        height: calc(.28 * var(--r));
        background: url("../assets/images-h5/news-cur.png") no-repeat center;
        background-size: contain;
    }

    /* ---------- Danh sach tin ---------- */

    .nl-page-list .nl-list {
        margin-top: calc(.26 * var(--r));
    }

    .nl-page-list .nl-item {
        height: auto;
        line-height: normal;
        margin: 0 0 calc(.15 * var(--r));
    }

    .nl-page-list .nl-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: calc(.2 * var(--r));
        height: auto;
        padding: calc(.3 * var(--r));
        background: #f7f5ef;
        font-size: calc(.26 * var(--r));
        line-height: 1.4;
        color: #b29d7c;
    }

    /* Ban h5 dao thu tu so voi ban PC: tieu de truoc, ngay sau. */
    .nl-page-list .nl-txt {
        order: 1;
        flex: 1 1 auto;
        display: block;
        width: auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .nl-page-list .nl-time {
        order: 2;
        flex: 0 0 auto;
        display: block;
        margin: 0;
        font-size: calc(.26 * var(--r));
        color: #b29d7c;
    }

    /* ---------- Phan trang (giu nguyen cua minh, chi chinh khoang cach) ---------- */

    /* Cho thay cho .down-more cua ban goc (margin 0.76rem tren, 0.98rem duoi). */
    .nl-page-list .nl-cont .el-pagination {
        margin: calc(.6 * var(--r)) 0 calc(.5 * var(--r));
    }

    /* Dai chan trang dang rong, tren mobile chi con lai duong ke - an di. */
    .nl-page-list .nl-bot,
    .nl-page-detail .nl-bot {
        display: none;
    }
}

/* ==========================================================================
   BAN MOBILE CUA TRANG CHI TIET TIN - clone theo h5/news_detail.html

   Dung lai nguyen khung cua trang danh sach (banner .header-comm, keo len duoi
   thanh dau trang fixed, nen trang) - ban goc cung the, chi khac nut quay lai
   tro ve danh sach thay vi trang chu. Ban h5 khong co thanh tab nen .nl-head
   xep xuong con 0 chieu cao.

   So do goc:
     .news-deial-wp        padding 0 0.3rem 0.98rem
     .news-detail-tit      padding 0.36rem 0; gach duoi 1px #f5f0e2
     .news-detail-tit .tit font 0.32rem, line-height 0.55rem, mau #7b6a4f, canh giua
     .news-detail-tit .time font 0.24rem, mau #b29d7c, canh giua, margin-top 0.15rem
     .news-detail          padding-top 0.43rem, font 0.26rem, mau #b29d7c, min-height 4rem
     .news-detail p        margin 0.16rem 0
   ========================================================================== */

@media (max-width: 1024px) {

    .nl-page-detail .nl-article {
        padding: 0 calc(.3 * var(--r)) calc(.98 * var(--r));
        /* Nen trang cua ban h5 da du tuong phan nen bo lop lot mo. */
        background: none;
    }

    .nl-page-detail .nl-article-head {
        padding: calc(.36 * var(--r)) 0;
        border-bottom: 1px solid #f5f0e2;
    }

    .nl-page-detail .nl-article-tit {
        font-size: calc(.32 * var(--r));
        line-height: calc(.55 * var(--r));
        color: #7b6a4f;
    }

    .nl-page-detail .nl-article-meta {
        margin-top: calc(.15 * var(--r));
        font-size: calc(.24 * var(--r));
        color: #b29d7c;
    }

    /* Ban goc dung #b29d7c cho ca than bai. Giu dung mau do o day vi nen da la
       trang tinh nen van doc duoc, khong con van de tuong phan nhu ban desktop. */
    .nl-page-detail .nl-article-body {
        min-height: calc(4 * var(--r));
        padding: calc(.43 * var(--r)) 0 0;
        font-size: calc(.26 * var(--r));
        line-height: 1.75;
        color: #b29d7c;
    }

    .nl-page-detail .nl-article-body p {
        margin: calc(.16 * var(--r)) 0;
    }

    .nl-page-detail .nl-article-body a {
        color: #b29d7c;
    }
}

/* ==========================================================================
   Desktop hep - tu 6 muc tro len hang tab chiem ~564px.
   Thanh tieu de rong = viewport - 266 (padding .nl-mid + phan thut .nl-cont),
   can toi thieu 156+30 (tieu de) + 198 (breadcrumb) + 564 = 948px, tuc viewport
   phai tu ~1214px. Duoi muc do thi bo breadcrumb - no chi la
   "Trang chu > Tin tuc", trong khi hang tab la thu nguoi dung thuc su bam.
   ========================================================================== */

@media (min-width: 1025px) and (max-width: 1219px) {
    .nl-page-list .nl-crumb {
        display: none;
    }

    /* Bo breadcrumb van chua du o be ngang nho nhat (1025px -> thanh chi rong
       744px), nen thu them le phai va khoang dem trong tung tab. */
    .nl-page-list .nl-nav {
        padding-right: 10px;
    }

    .nl-page-list .nl-tab {
        padding: 0 6px;
    }
}