/* NEWS HERO */

.news-hero {
    background:linear-gradient(160deg,var(--g9),var(--g7) 55%,var(--g6));
    color:var(--w);
    padding:28px 0;
    position:relative;
    overflow:hidden;
}

.news-hero-inner {
    max-width:1300px;
    margin:0 auto;
    padding:0 28px;
    position:relative;
    z-index:2;
}

.news-hero h1 {
    font-size:28px;
    font-weight:800;
    margin-bottom:3px;
}

.news-hero h1 span {
    color:var(--gold);
}

.news-hero .news-sub {
    font-size:12.5px;
    opacity:.7;
}

.news-hero-deco {
    position:absolute;
    right:80px;
    top:50%;
    transform:translateY(-50%);
    opacity:.09;
    font-size:100px;
    color:var(--gold);
}

/* FEATURED */

.featured {
    display:grid;
    grid-template-columns:1.6fr 1fr;
    gap:16px;
    margin-bottom:26px;
}

.feat-main {
    background:var(--w);
    border:1px solid #eee;
    border-radius:12px;
    overflow:hidden;
    cursor:pointer;
    transition:.2s;
}

.feat-main:hover {
    box-shadow:0 6px 20px rgba(0,0,0,.08);
}

.fm-img {
    height:250px;
    position:relative;
    color:rgba(255,255,255,.28);
}

.fm-img img{
    height: 250px;
    width: 100%;
    object-fit: cover;
}

.fm-cat {
    position:absolute;
    top:12px;
    left:12px;
    padding:5px 13px;
    border-radius:6px;
    font-size:11px;
    font-weight:700;
    background:var(--r);
    color:var(--w);
}

.fm-status {
    position:absolute;
    top:12px;
    right:12px;
    padding:4px 11px;
    border-radius:6px;
    font-size:10.5px;
    font-weight:600;
    background:rgba(255,255,255,.92);
    color:var(--g8);
    display:flex;
    align-items:center;
    gap:4px;
}

.fm-status i{
    font-size:11px;
    color:#e65100
}

.fm-body {
    padding:16px 18px;
}

.fm-title {
    font-size:19px;
    font-weight:800;
    color:var(--g900);
    line-height:1.4;
    margin-bottom:7px;
    margin-top: 0;
}

.fm-desc {
    font-size:13px;
    color:var(--g600);
    line-height:1.7;
    margin-bottom:12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fm-meta {
    display:flex;
    align-items:center;
    gap:16px;
    padding-top:11px;
    border-top:1px solid #f5f5f5;
    font-size:11.5px;
    color:var(--g500);
}

.fm-meta span {
    display:flex;
    align-items:center;
    gap:4px;
}

.fm-meta i {
    font-size:14px;
}

.fm-tags {
    display:flex;
    gap:5px;
    margin-left:auto;
}

.tag {
    padding:3px 9px;
    border-radius:12px;
    font-size:10px;
    font-weight:500;
    background:var(--g50);
    color:var(--g7);
}

/* Side featured stack */

.feat-side {
    display:flex;
    flex-direction:column;
    gap:12px;
}

.fs-card {
    background:var(--w);
    border:1px solid #eee;
    border-radius:10px;
    overflow:hidden;
    display:flex;
    gap:11px;
    padding:11px;
    transition:.2s;
    flex:1;
}

.fs-card:hover {
    border-color:var(--g4);
    box-shadow:0 2px 10px rgba(0,0,0,.06);
}

.fs-img {
    width:88px;
    height:70px;
    border-radius:8px;
    position: relative;
    overflow: hidden;
}

.fs-img img{
    width: 100%;
    height: 70px;
    object-fit: cover;
}

.fs-body {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
}

.fs-cat {
    font-size:9.5px;
    font-weight:700;
    color:var(--r);
    margin-bottom:2px;
    text-transform:uppercase;
}

.fs-title {
    font-size:12.5px;
    font-weight:700;
    color:var(--g900);
    line-height:1.45;
    margin-bottom:4px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.fs-meta {
    display:flex;
    gap:10px;
    font-size:10.5px;
    color:var(--g500);
}

.fs-meta span {
    display:flex;
    align-items:center;
    gap:3px;
}

.fs-meta i {
    font-size:12px;
}

/* NEWS LIST */

.sec-title {
    font-size:15px;
    font-weight:700;
    color:var(--g900);
    margin-bottom:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.sec-title .st-left {
    display:flex;
    align-items:center;
    gap:7px;
}

.sec-title i {
    font-size:19px;
    color:var(--g7);
}

.sec-title .st-more {
    font-size:12px;
    color:var(--g7);
    font-weight:500;
    display:flex;
    align-items:center;
    gap:3px;
}

.sec-title .st-more:hover {
    text-decoration:underline;
}

.news-list {
    display:flex;
    flex-direction:column;
    gap:14px;
}

.news-card {
    background:var(--w);
    border:1px solid #eee;
    border-radius:12px;
    display:flex;
    gap:16px;
    padding:14px;
    transition:.2s;
    position:relative;
}

.news-card:hover {
    border-color:var(--g4);
    box-shadow:0 3px 14px rgba(0,0,0,.06);
}

.nc-img {
    width:190px;
    height:126px;
    border-radius:10px;
    position:relative;
    overflow:hidden;
}

.nc-img img{
    width: 100%;
    height: 126px;
    object-fit: cover;
}

.nc-status {
    position:absolute;
    bottom:7px;
    left:7px;
    padding:3px 9px;
    border-radius:5px;
    font-size:9.5px;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:3px;
}

.ns-new {
    background:#c62828;
    color:#fff;
    font-size: 10px;
}

.ns-hot {
    background:#e65100;
    color:#fff;
}

.ns-event {
    background:#1565c0;
    color:#fff;
}

.ns-normal {
    background:rgba(255,255,255,.9);
    color:var(--g700);
}

.nc-body {
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
}

.nc-cat {
    font-size:10.5px;
    font-weight:700;
    color:var(--r);
    text-transform:uppercase;
    margin-bottom:4px;
    letter-spacing:.3px;
    display:flex;
    align-items:center;
    gap:5px;
}

.nc-cat .sep {
    color:var(--bd);
    font-weight:400;
}

.nc-cat .subcat-name {
    color:var(--g7);
}

.nc-title {
    font-size:16px;
    font-weight:700;
    color:var(--g900);
    line-height:1.45;
    margin-bottom:6px;
    margin-top: 0;
}

.nc-desc {
    font-size:12.5px;
    color:var(--g600);
    line-height:1.7;
    margin-bottom:10px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.nc-footer {
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:auto;
    padding-top:9px;
    border-top:1px solid #f8f8f8;
}

.nc-meta {
    display:flex;
    align-items:center;
    gap:14px;
    font-size:11.5px;
    color:var(--g500);
}

.nc-meta span {
    display:flex;
    align-items:center;
    gap:4px;
}

.nc-meta i {
    font-size:14px;
}

.nc-views {
    color:var(--g7);
    font-weight:600;
}

.nc-tags {
    display:flex;
    gap:5px;
    margin-left:auto;
    flex-wrap:wrap;
}

.nc-edit {
    position:absolute;
    top:14px;
    right:14px;
    color:var(--bd);
    font-size:17px;
    cursor:pointer;
    transition:.15s;
}

.nc-edit:hover {
    color:var(--g7);
}

/* Popular */

.pop-item {
    display:flex;
    gap:11px;
    padding:11px 17px;
    border-bottom:1px solid #f8f8f8;
    cursor:pointer;
    transition:.15s;
    align-items:flex-start;
}

.pop-item:hover {
    background:var(--f5);
}

.pop-item:last-child {
    border-bottom:none;
}

.pop-rank {
    width:26px;
    height:26px;
    border-radius:7px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:800;
    flex-shrink:0;
}

.pr-1 {
    background:#fff8e1;
    color:#f57f17;
}

.pr-2 {
    background:#f5f5f5;
    color:#546e7a;
}

.pr-3 {
    background:#fff3e0;
    color:#e65100;
}

.pr-n {
    background:var(--f5);
    color:var(--g600);
}

.pop-info {
    flex:1;
    min-width:0;
}

.pop-title {
    font-size:12px;
    font-weight:600;
    color:var(--g900);
    line-height:1.45;
    margin-bottom:3px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.pop-meta {
    font-size:10.5px;
    color:var(--g500);
    display:flex;
    gap:9px;
}

.pop-meta span {
    display:flex;
    align-items:center;
    gap:3px;
}

.pop-meta i {
    font-size:12px;
}

/* Categories list */

.cat-list-item {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:11px 17px;
    border-bottom:1px solid #f8f8f8;
    cursor:pointer;
    transition:.15s;
}

.cat-list-item:hover {
    background:var(--f5);
}

.cat-list-item:last-child {
    border-bottom:none;
}

.cli-left {
    display:flex;
    align-items:center;
    gap:9px;
    font-size:12.5px;
    font-weight:500;
    color:var(--g800);
}

.cli-icon {
    width:30px;
    height:30px;
    border-radius:8px;
    background:var(--g50);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--g7);
    font-size:15px;
}

.cli-cnt {
    font-size:11px;
    color:var(--g500);
    background:var(--f5);
    padding:2px 9px;
    border-radius:10px;
    font-weight:600;
}

/* Tag cloud */

.tag-cloud {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    padding:14px 17px;
}

.tc-tag {
    padding:5px 12px;
    border-radius:14px;
    font-size:11px;
    font-weight:500;
    background:var(--g50);
    color:var(--g7);
    cursor:pointer;
    transition:.15s;
    border:1px solid transparent;
}

.tc-tag:hover {
    background:var(--g7);
    color:var(--w);
}

/* Newsletter */

.news-box {
    background:linear-gradient(160deg,var(--g8),var(--g6));
    border-radius:12px;
    padding:18px;
    color:var(--w);
    text-align:center;
}

.news-box i {
    font-size:32px;
    color:var(--gold);
    display:block;
}

.news-box h4 {
    font-size:14px;
    font-weight:700;
    margin-bottom:5px;
}

.news-box p {
    font-size:11.5px;
    opacity:.8;
    line-height:1.6;
    margin-bottom:12px;
}

.news-box input {
    width:100%;
    padding:9px 12px;
    border:none;
    border-radius:7px;
    font-size:12px;
    font-family:inherit;
    margin-bottom:8px;
    color: #333;
}

.news-box input:focus {
    outline:none;
}

.news-box button {
    width:100%;
    padding:9px;
    background:var(--gold);
    color:#3d2b00;
    border:none;
    border-radius:7px;
    font-size:12.5px;
    font-weight:700;
    cursor:pointer;
    font-family:inherit;
}

.news-box button:hover {
    background:#c9a52f;
}

.subscribe-alert {
    padding: 12px 15px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    animation: fadeIn 0.3s ease;
}
.subscribe-alert i {
    font-size: 14px;
}
.subscribe-success {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #c8e6c9;
}
.subscribe-warning {
    background-color: #fff8e1;
    color: #f57f17;
    border: 1px solid #ffecb3;
}
.subscribe-danger {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #ffcdd2;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* News detail */


.article {
    background:var(--w);
    border:1px solid #eee;
    border-radius:14px;
    padding:26px 30px;
}

.art-cat {
    display:flex;
    align-items:center;
    gap:7px;
    margin-bottom:12px;
    flex-wrap:wrap;
}

.cat-chip {
    padding:4px 12px;
    border-radius:6px;
    font-size:11px;
    font-weight:700;
    background:var(--g50);
    color:var(--g7);
    text-transform:uppercase;
    letter-spacing:.3px;
}

.cat-sep {
    color:var(--bd);
    font-size:11px;
}

.art-status {
    padding:4px 11px;
    border-radius:6px;
    font-size:10.5px;
    font-weight:600;
    background:#fff3e0;
    color:#e65100;
    display:flex;
    align-items:center;
    gap:4px;
}

.art-status i {
    font-size:12px;
}

.art-title {
    font-size:28px;
    font-weight:800;
    color:var(--g900);
    line-height:1.35;
    margin-bottom:12px;
}

.art-summary {
    font-size:15px;
    color:var(--g700);
    line-height:1.75;
    font-weight:500;
    padding:14px 18px;
    background:var(--f5);
    border-left:3px solid var(--g7);
    border-radius:0 8px 8px 0;
    margin-bottom:18px;
}

.art-meta {
    display:flex;
    align-items:center;
    gap:18px;
    padding-bottom:16px;
    border-bottom:1px solid #f0f0f0;
    margin-bottom:20px;
    flex-wrap:wrap;
}

.am-author {
    display:flex;
    align-items:center;
    gap:9px;
}

.am-avatar {
    width:36px;
    height:36px;
    border-radius:50%;
    background:var(--g7);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--w);
    font-size:12px;
    font-weight:600;
}

.am-info .an {
    font-size:12.5px;
    font-weight:700;
    color:var(--g900);
}

.am-info .ar {
    font-size:11px;
    color:var(--g500);
}

.am-stat {
    display:flex;
    align-items:center;
    gap:5px;
    font-size:12px;
    color:var(--g600);
}

.am-stat i {
    font-size:15px;
    color:var(--g500);
}

.am-stat.views {
    color:var(--g7);
    font-weight:600;
}

.am-stat.views i {
    color:var(--g7);
}

/* Hero image */

.art-hero {
    position:relative;
    margin-bottom:22px;
}

.art-hero img{
    width: 100%;
    max-height: 500px;
    border-radius: 12px;
    margin-bottom:8px;
    object-fit: cover;
}

.art-caption {
    font-size:11.5px;
    color:var(--g500);
    font-style:italic;
    text-align:center;
}

/* Content */

.art-content {
    font-size:16px;
    color:var(--g800);
    line-height:1.9;
}

.art-content p {
    margin-bottom:18px;
}

.art-content h2 {
    font-family:'Inter',sans-serif;
    font-size:18px;
    font-weight:700;
    color:var(--g900);
    margin:26px 0 12px;
}

.art-content h3 {
    font-family:'Inter',sans-serif;
    font-size:16px;
    font-weight:700;
    color:var(--g900);
    margin:26px 0 12px;
}

.art-content ul {
    margin:0 0 18px 20px;
}

.art-content ul li {
    margin-bottom:8px;
}

.art-content blockquote {
    border-left:4px solid var(--g7);
    padding:12px 20px;
    background:var(--g50);
    border-radius:0 8px 8px 0;
    font-style:italic;
    color:var(--g8);
    margin:20px 0;
    font-size:15px;
}

.art-content strong {
    font-weight:700;
    color:var(--g900);
}

.art-content img{
    max-width: 100%;
    height: auto;
}

.art-tags {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    padding: 20px 0;
    border-top: 1px solid #f0f0f0;
    margin-top: 24px;
}

.art-tags .lbl {
    font-size: 12px;
    color: var(--g500);
    margin-right: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.art-tags a:hover{
    color: #fff;
}


/* RELATED */

.related {
    background:var(--w);
    border:1px solid #eee;
    border-radius:14px;
    padding:22px 26px;
    margin-top:20px;
}

.rel-head {
    font-size:15px;
    font-weight:700;
    color:var(--g900);
    margin-bottom:16px;
    display:flex;
    align-items:center;
    gap:7px;
}

.rel-head i {
    font-size:19px;
    color:var(--g7);
}

.rel-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.rel-card {
    border:1px solid #eee;
    border-radius:10px;
    overflow:hidden;
    cursor:pointer;
    transition:.2s;
}

.rel-card:hover {
    border-color:var(--g4);
    box-shadow:0 3px 12px rgba(0,0,0,.06);
    transform:translateY(-2px);
}

.rc-img {
    position:relative;
}

.rc-img img{
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.rc-cat {
    position:absolute;
    top:8px;
    left:8px;
    padding:2px 8px;
    border-radius:5px;
    font-size:9px;
    font-weight:700;
    background:rgba(255,255,255,.92);
    color:var(--r);
}

.rc-body {
    padding:11px 13px;
}

.rc-title {
    font-size:12.5px;
    font-weight:700;
    color:var(--g900);
    line-height:1.45;
    margin-bottom:6px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.rc-meta {
    display:flex;
    gap:10px;
    font-size:10.5px;
    color:var(--g500);
}

.rc-meta span {
    display:flex;
    align-items:center;
    gap:3px;
}

.rc-meta i {
    font-size:12px;
}

/* RATING */

.rating-box {
    background:linear-gradient(135deg,#fffdf5,#fff8e1);
    border:1px solid #f0e6c0;
    border-radius:12px;
    padding:18px 20px;
    margin-top:20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}

.rb-left {
    display:flex;
    align-items:center;
    gap:16px;
}

.rb-score {
    text-align:center;
}

.rb-score .num {
    font-size:32px;
    font-weight:800;
    color:#b8860b;
    line-height:1;
}

.rb-score .max {
    font-size:13px;
    color:var(--g500);
    font-weight:400;
}

.rb-detail .rd-stars {
    display:flex;
    gap:2px;
    color: #e4a025;
    margin-bottom:3px;
}

.rb-detail .rd-stars i {
    font-size:20px;
    color:var(--gold);
    cursor:pointer;
    transition:.15s;
}

.rb-detail .rd-stars i:hover {
    transform:scale(1.15);
}

.rb-detail .rd-stars i.empty {
    color:#e0d5a8;
}

.rb-detail .rd-count {
    font-size:11.5px;
    color:var(--g600);
}

.rb-right {
    display:flex;
    align-items:center;
    gap:10px;
}

.rb-label {
    font-size:12.5px;
    color:var(--g700);
    font-weight:500;
}

.btn-rate {
    padding:9px 20px;
    background:var(--gold);
    color:#3d2b00;
    border:none;
    border-radius:8px;
    font-size:12.5px;
    font-weight:700;
    cursor:pointer;
    font-family:inherit;
    display:flex;
    align-items:center;
    gap:5px;
    transition:.2s;
}

.btn-rate:hover {
    background:#c9a52f;
}

.btn-rate i {
    font-size:15px;
}

/* SOCIAL SHARE */

.share-box {
    display:flex;
    align-items:center;
    gap:12px;
    padding:18px 0;
    border-top:1px solid #f0f0f0;
    margin-top:20px;
    flex-wrap:wrap;
}

.share-label {
    font-size:12.5px;
    font-weight:600;
    color:var(--g800);
    display:flex;
    align-items:center;
    gap:5px;
}

.share-label i {
    font-size:16px;
    color:var(--g7);
}

.share-btns {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.sb {
    display:flex;
    align-items:center;
    gap:6px;
    padding:8px 16px;
    border-radius:8px;
    font-size:12px;
    font-weight:600;
    color:var(--w);
    border:none;
    cursor:pointer;
    font-family:inherit;
    transition:.15s;
}

.sb:hover {
    opacity:.88;
    transform:translateY(-1px);
}

.sb i {
    font-size:16px;
}

.sb-fb {
    background:#1877f2;
}

.sb-li {
    background:#0a66c2;
}

.sb-tw {
    background:#000;
}

.sb-zalo {
    background:#0068ff;
}

.sb-copy {
    background:var(--g600);
}

.share-count {
    margin-left:auto;
    font-size:12px;
    color:var(--g500);
    display:flex;
    align-items:center;
    gap:5px;
}

.share-count i {
    font-size:15px;
}

/* EVENT LINK */

.event-link {
    background:linear-gradient(135deg,#e3f2fd,#bbdefb);
    border:1px solid #90caf9;
    border-radius:12px;
    padding:16px 20px;
    margin-top:20px;
    display:flex;
    align-items:center;
    gap:14px;
}

.el-icon {
    width:46px;
    height:46px;
    border-radius:11px;
    background:#1565c0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--w);
    font-size:22px;
    flex-shrink:0;
}

.el-info {
    flex:1;
}

.el-label {
    font-size:10.5px;
    font-weight:700;
    color:#0d47a1;
    text-transform:uppercase;
    letter-spacing:.4px;
    margin-bottom:2px;
}

.el-title {
    font-size:13.5px;
    font-weight:700;
    color:#0d3c6e;
    margin-bottom:2px;
}

.el-meta {
    font-size:11.5px;
    color:#1565c0;
}

.btn-event {
    padding:9px 20px;
    background:#1565c0;
    color:var(--w);
    border:none;
    border-radius:8px;
    font-size:12.5px;
    font-weight:600;
    cursor:pointer;
    font-family:inherit;
    white-space:nowrap;
    display:flex;
    align-items:center;
    gap:5px;
}

.btn-event:hover {
    background:#0d47a1;
    color: #fff;
}

.btn-event i {
    font-size:15px;
}