/* ==========================================================================
   VNINDUSTRY — Giao diện trang tin (theme đỏ)
   Dùng bởi: news/layout/base.blade.php và các trang extends nó
   Yêu cầu: Bootstrap 4 + Font Awesome 6 (nạp trước file này)

   MỤC LỤC
   1.  Biến màu & reset
   2.  Header (logo, tìm kiếm, đăng nhập/đăng ký)
   3.  Breadcrumb
   4.  Sidebar chuyên mục (sticky)
   5.  Tiêu đề mục
   6.  Nổi bật (carousel)
   7.  Thẻ tin nhỏ (mini card)
   8.  Xu hướng (trend)
   9.  Quảng cáo
   10. Xem nhanh
   11. Danh sách tin (category)
   12. Widget cột phải
   13. Xếp hạng thành viên
   14. Chủ đề hot (tags)
   15. Bộ lọc & chips chuyên mục
   16. Chi tiết bài viết
   17. Chia sẻ (laravel-share)
   18. Tương tác: thích / bình luận
   19. Footer
   20. Responsive
   ========================================================================== */

/* ===== 1. BIẾN MÀU & RESET ===== */
:root {
    --brand-red: #c8102e;
    --brand-red-dark: #a50d24;
    --line: #e6e6e6;
    --muted: #8a8a8a;
}
body { font-family:'Segoe UI',Roboto,Arial,sans-serif; color:#222; font-size:14px; background:#fff; }
a { color:inherit; text-decoration:none; }
a:hover { text-decoration:none; }
img { max-width:100%; }

/* ===== TOP HEADER (sticky) ===== */
.top-header { position:sticky; top:0; z-index:1030; border-bottom:3px solid var(--brand-red); background:#fff; padding:12px 0; box-shadow:0 2px 8px rgba(0,0,0,.06); }
/* Sidebar sticky phải nằm dưới header khi cuộn */
.brand-logo { display:inline-block; font-weight:800; font-size:26px; letter-spacing:.5px; color:var(--brand-red); line-height:1.1; }
.brand-logo img { max-width:100%; max-height:74px; width:auto; }
.brand-logo small { display:block; font-size:10px; font-weight:600; color:var(--brand-red); opacity:.75; letter-spacing:1.5px; margin-top:3px; }
.brand-logo .cn { display:inline-block; background:var(--brand-red); color:#fff; padding:3px 8px; border-radius:4px; margin-right:4px; }

/* Search — pill, viền đỏ, nút đỏ */
.search-box .form-control {
    height:44px; border:2px solid var(--brand-red); border-right:0;
    border-radius:22px 0 0 22px; font-size:14px; color:var(--brand-red); padding-left:18px;
}
.search-box .form-control::placeholder { color:#c98d96; }
.search-box .form-control:focus { box-shadow:none; border-color:var(--brand-red); }
.search-box .btn {
    height:44px; min-width:60px; border-radius:0 22px 22px 0;
    background:var(--brand-red); color:#fff; border:2px solid var(--brand-red); font-size:16px;
}
.search-box .btn:hover { background:var(--brand-red-dark); border-color:var(--brand-red-dark); }

/* Auth — nút to, rõ */
.auth-links { display:flex; justify-content:flex-end; align-items:center; gap:10px; }
.auth-links a {
    display:inline-flex; align-items:center; gap:6px;
    font-weight:700; font-size:14px; color:var(--brand-red);
    border:2px solid var(--brand-red); border-radius:22px; padding:8px 16px; white-space:nowrap;
}
.auth-links a.solid { background:var(--brand-red); color:#fff; }
.auth-links .auth-user { display:inline-flex; align-items:center; gap:6px; font-weight:700; font-size:13.5px; color:var(--brand-red); white-space:nowrap; }
.auth-links a:hover { background:var(--brand-red); color:#fff; }
.auth-links a.solid:hover { background:var(--brand-red-dark); border-color:var(--brand-red-dark); }

/* Breadcrumb nằm trong cột nội dung (không chiếm 1 dòng riêng) */
.crumb { font-size:13px; color:var(--brand-red); margin-bottom:12px; font-weight:600; }
.crumb a { color:var(--brand-red); }
.crumb i { margin:0 4px; opacity:.6; }

/* ===== SIDEBAR MENU (sticky) ===== */
.sidebar-sticky { position:sticky; top:118px; max-height:calc(100vh - 130px); overflow-y:auto; }
.sidebar-sticky::-webkit-scrollbar { width:6px; }
.sidebar-sticky::-webkit-scrollbar-thumb { background:#ddd; border-radius:3px; }
.sidebar-menu { border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.sidebar-title { background:#f5f5f5; color:var(--brand-red); font-weight:700; font-size:12px; padding:9px 12px; border-bottom:1px solid var(--line); text-transform:uppercase; }
.sidebar-menu .menu-item { display:flex; justify-content:space-between; align-items:center; gap:6px; padding:9px 12px; border-bottom:1px solid var(--line); font-weight:600; font-size:12.5px; cursor:pointer; color:var(--brand-red); }
.sidebar-menu .menu-item:hover { background:#fdf2f4; }
.sidebar-menu .menu-item .chevron { transition:transform .2s; font-size:10px; color:var(--brand-red); opacity:.6; }
.sidebar-menu .menu-item[aria-expanded="true"] .chevron { transform:rotate(90deg); opacity:1; }
.submenu a { display:block; padding:7px 12px 7px 24px; border-bottom:1px solid var(--line); font-size:12.5px; color:var(--brand-red); opacity:.85; background:#fbfbfb; }
.submenu a:hover { background:#fdf2f4; opacity:1; padding-left:28px; }
.sidebar-menu > *:last-child { border-bottom:0; }

/* ===== SECTION HEADINGS ===== */
.sec-title, .section-heading { color:var(--brand-red); font-weight:800; font-size:16px; text-transform:uppercase; padding-bottom:6px; border-bottom:2px solid var(--brand-red); margin-bottom:16px; display:inline-block; }
.sec-wrap, .section-heading-wrap { border-bottom:1px solid var(--line); margin-bottom:16px; }

/* ===== FEATURED (carousel) ===== */
.featured { position:relative; border-radius:4px; overflow:hidden; }
.featured img { width:100%; height:340px; object-fit:cover; display:block; }
.featured .overlay { position:absolute; left:0; right:0; bottom:0; padding:34px 20px 16px; background:linear-gradient(transparent, rgba(0,0,0,.85)); color:#fff; z-index:2; }
.featured .overlay h3 { font-size:20px; font-weight:800; line-height:1.3; margin:0; }
.featured .overlay h3 a { color:#fff; }
.featured .overlay .excerpt { font-size:12px; opacity:.85; margin:6px 0; }
.featured .overlay .meta { font-size:12px; opacity:.9; }
.featured .overlay .meta span { margin-right:14px; }
.featured .meta i { margin-right:4px; }
/* Phòng vệ: đảm bảo hành vi slide đúng dù CSS khác can thiệp */
.featured .carousel-item { position:relative; }
.featured .carousel-item .overlay { pointer-events:none; }
.featured .carousel-item .overlay a { pointer-events:auto; }
/* Nút điều hướng + chấm rõ hơn trên nền ảnh */
.featured .carousel-control-prev, .featured .carousel-control-next { width:8%; opacity:.9; z-index:3; }
.featured .carousel-control-prev-icon, .featured .carousel-control-next-icon { background-color:rgba(0,0,0,.45); border-radius:50%; width:38px; height:38px; background-size:55% 55%; }
.featured .carousel-indicators { z-index:3; margin-bottom:6px; }
.featured .carousel-indicators li { width:10px; height:10px; border-radius:50%; }

/* ===== MINI CARD ===== */
.widget-title { color:var(--brand-red); font-weight:800; font-size:15px; text-transform:uppercase; padding-bottom:6px; border-bottom:2px solid var(--brand-red); margin-bottom:12px; }
.redbox { border:1px solid var(--brand-red); border-radius:6px; padding:8px; }
.mini-item { display:flex; gap:10px; padding:7px 4px; }
.mini-item + .mini-item { border-top:1px dashed #eee; }
.mini-item .thumb { flex:0 0 62px; width:62px; height:46px; border-radius:4px; object-fit:cover; background:#e9e9e9; }
.mini-item .m-title { font-size:12.5px; font-weight:600; line-height:1.4; color:var(--brand-red); display:block; }
.mini-item .m-title:hover { text-decoration:underline; }
.mini-item .m-meta { font-size:11px; color:var(--muted); margin-top:4px; }

/* ===== XU HUONG ===== */
.trend-wrap { position:relative; }
.trend-scroll { display:flex; gap:10px; overflow-x:auto; scroll-behavior:smooth; padding-bottom:4px; }
.trend-scroll::-webkit-scrollbar { height:6px; }
.trend-scroll::-webkit-scrollbar-thumb { background:#ccc; border-radius:3px; }
.trend-card { flex:0 0 calc(20% - 8px); min-width:150px; position:relative; border-radius:4px; overflow:hidden; }
.trend-card img { width:100%; height:120px; object-fit:cover; display:block; }
.trend-card .tlabel { position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.6); color:#fff; font-size:11px; padding:5px 8px; line-height:1.3; }
.trend-card .tlabel i { color:#ff7043; margin-right:4px; }
.trend-nav { position:absolute; top:38%; width:28px; height:40px; background:rgba(0,0,0,.4); color:#fff; border:0; border-radius:4px; z-index:2; }
.trend-nav.prev { left:-6px; } .trend-nav.next { right:-6px; }
.trend-nav:hover { background:var(--brand-red); }

/* ===== AD BOX ===== */
.ad-box { width:100%; background:#4a4a4a; border-radius:4px; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#ddd; font-size:13px; }
.ad-box img { width:100%; height:100%; object-fit:cover; }
.ad-tall { min-height:120px; }
.ad-mid { min-height:250px; }

/* ===== XEM NHANH ===== */
.qv-item { padding:16px 0; border-bottom:1px solid var(--line); }
.qv-item .qv-title { color:var(--brand-red); font-weight:800; font-size:17px; line-height:1.35; display:block; }
.qv-item .qv-title:hover { text-decoration:underline; }
.qv-item .qv-excerpt { color:#666; font-size:12.5px; margin:8px 0; line-height:1.6; }
.qv-item .qv-excerpt .more { color:var(--brand-red); font-style:italic; }
.qv-item .qv-img { width:100%; height:230px; object-fit:cover; border-radius:4px; margin-bottom:10px; }
.qv-meta { display:flex; align-items:center; flex-wrap:wrap; font-size:12.5px; color:var(--muted); }
.qv-meta .left span, .qv-meta .left a { margin-right:16px; color:var(--muted); }
.qv-meta .left a:hover { color:var(--brand-red); }
.qv-meta .right { margin-left:auto; }
.qv-meta .right span, .qv-meta .right a { margin-left:16px; color:var(--muted); }
.qv-meta .right a:hover { color:var(--brand-red); }
.qv-meta i { margin-right:4px; }

/* ===== NEWS LIST ===== */
.news-item { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
.news-item .thumb { flex:0 0 130px; width:130px; height:90px; border-radius:4px; object-fit:cover; background:#e9e9e9; }
.news-item .title { color:var(--brand-red); font-weight:700; font-size:15px; line-height:1.35; display:block; }
.news-item .title:hover { text-decoration:underline; }
.news-item .excerpt { color:#666; font-size:12.5px; margin:6px 0; line-height:1.5; }
.news-item .meta { font-size:12px; color:var(--muted); }
.news-item .meta span { margin-right:14px; }
.news-item .meta i { margin-right:4px; }

/* ===== RIGHT WIDGETS ===== */
.widget { margin-bottom:26px; }
.widget .mini-item.boxed { border:1px solid var(--line); border-radius:4px; margin-bottom:8px; padding:8px; }

/* ===== MEMBER RANKING ===== */
.rank-box { border:1px solid var(--line); border-radius:4px; padding:4px 0; }
.rank-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--line); }
.rank-item:last-child { border-bottom:0; }
.rank-avatar { width:34px; height:34px; border-radius:50%; background:#f3f3f3; display:flex; align-items:center; justify-content:center; color:var(--brand-red); flex:0 0 34px; }
.rank-name { font-weight:600; font-size:13px; color:var(--brand-red); flex:1; }
.rank-point { font-size:11px; color:var(--muted); white-space:nowrap; }

/* ===== HOT TAGS ===== */
.hot-tag-card { position:relative; display:block; border-radius:4px; overflow:hidden; margin-bottom:16px; }
.hot-tag-card img { width:100%; height:110px; object-fit:cover; }
.hot-tag-card .tag-name { position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.6); color:#fff; font-size:12px; font-weight:600; padding:6px 8px; }

/* ===== FILTER / CHIPS ===== */
.filter-bar { background:#f7f7f7; border:1px solid var(--line); border-radius:4px; padding:12px; margin-bottom:16px; }
.filter-bar .btn-submit { background:var(--brand-red); color:#fff; border:0; border-radius:4px; }
.cat-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.cat-chips a { display:inline-block; padding:6px 14px; border:1px solid var(--line); border-radius:20px; font-size:12.5px; font-weight:600; color:var(--brand-red); background:#fff; }
.cat-chips a:hover, .cat-chips .active a { background:var(--brand-red); color:#fff; border-color:var(--brand-red); }

/* ===== SINGLE POST ===== */
.article-title { font-size:26px; font-weight:800; line-height:1.3; color:var(--brand-red); margin-bottom:12px; }
.article-meta { display:flex; flex-wrap:wrap; align-items:center; gap:16px; font-size:12.5px; color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:16px; }
.article-meta i { margin-right:4px; }
.article-meta a { color:var(--brand-red); }
.article-feature { width:100%; border-radius:4px; margin-bottom:16px; }
.article-sapo { font-size:15px; font-weight:600; line-height:1.6; color:#333; margin-bottom:16px; }
.article-content { font-size:15px; line-height:1.8; color:#222; }
.article-content img { height:auto; border-radius:4px; margin:10px 0; }
.article-content p { margin-bottom:14px; }
.related-list { list-style:none; padding:0; margin:0 0 20px; }
.related-list li { padding:8px 0; border-bottom:1px dashed var(--line); }
.related-list li a { font-weight:600; color:var(--brand-red); }
.related-list li a span { color:var(--muted); font-weight:400; font-size:12px; }
.tag-cloud a { display:inline-block; margin:0 6px 6px 0; padding:4px 12px; background:#f2f2f2; border-radius:14px; font-size:12.5px; color:var(--brand-red); }
.tag-cloud a:hover { background:var(--brand-red); color:#fff; }
/* Chia sẻ — style theo markup của package laravel-share:
   <div id="social-links"><ul><li><a class="social-button"><span class="fab fa-..."></span></a></li></ul></div> */
.share-row { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:20px 0; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.share-row .share-label { font-weight:700; font-size:13.5px; color:var(--brand-red); white-space:nowrap; }
.share-row .share-label i { margin-right:5px; }
.share-row #social-links ul { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.share-row #social-links li { margin:0; }
.share-row #social-links a {
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:50%;
    background:#f2f2f2; color:var(--brand-red); font-size:17px;
    transition:background .2s, color .2s, transform .2s;
}
.share-row #social-links a:hover { color:#fff; transform:translateY(-2px); }
.share-row #social-links a span { line-height:1; }
/* Màu thương hiệu từng mạng — bám theo href nên không phụ thuộc cấu trúc bên trong */
.share-row #social-links a[href*="facebook.com"]:hover { background:#1877f2; }
.share-row #social-links a[href*="twitter.com"]:hover  { background:#1da1f2; }
.share-row #social-links a[href*="linkedin.com"]:hover { background:#0a66c2; }
.share-row #social-links a[href*="wa.me"]:hover        { background:#25d366; }
.share-row #social-links a[href*="telegram.me"]:hover  { background:#0088cc; }
.share-row #social-links a[href*="reddit.com"]:hover   { background:#ff4500; }

.btn-more { background:var(--brand-red); color:#fff; font-weight:600; border-radius:20px; padding:8px 30px; }
.btn-more:hover { background:var(--brand-red-dark); color:#fff; }

/* ===== FOOTER ===== */
footer.site-footer { background:var(--brand-red); color:#fff; padding:30px 0 20px; margin-top:40px; }
footer.site-footer h6 { font-weight:700; margin-bottom:12px; font-size:14px; }
footer.site-footer p, footer.site-footer a { font-size:12.5px; color:#fff; opacity:.92; line-height:1.7; }
footer.site-footer a:hover { text-decoration:underline; }
.social-icons a { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:#fff; color:var(--brand-red); margin-right:8px; font-size:16px; }
.footer-copy { border-top:1px solid rgba(255,255,255,.25); margin-top:14px; padding-top:12px; text-align:center; font-size:12.5px; opacity:.9; }

.mobile-menu-btn { border:2px solid var(--brand-red); color:var(--brand-red); background:#fff; font-weight:700; border-radius:20px; }
@media (min-width:992px){ .mobile-menu-btn{display:none;} #sidebarCollapse{display:block!important;} }
@media (max-width:991px){ .sidebar-sticky{ position:static; max-height:none; } }
@media (max-width:767px){
    .trend-card{ flex:0 0 70%; }
    .featured img{ height:220px; }
    .article-title{ font-size:22px; }
    .auth-links a{ padding:6px 12px; font-size:13px; }
    .brand-logo img{ max-height:52px; }
}

/* ===== 18. TƯƠNG TÁC: THÍCH / BÌNH LUẬN (trang chi tiết bài viết) ===== */
.engage-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:10px 0; margin-top:20px; }
.engage-btn { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:#fff; color:var(--brand-red); border-radius:20px; padding:6px 16px; font-size:13px; font-weight:600; }
.engage-btn b { font-weight:700; }
.engage-btn:hover { background:#fdf2f4; color:var(--brand-red); }
.engage-btn.active { background:var(--brand-red); color:#fff; border-color:var(--brand-red); }

.comment-form textarea, .comment-form input { border:1px solid var(--line); }
.comment-item { display:flex; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); }
.comment-item.reply { border-bottom:0; padding:8px 0 0; }
.comment-avatar { flex:0 0 36px; width:36px; height:36px; border-radius:50%; background:#f3f3f3; display:flex; align-items:center; justify-content:center; color:var(--brand-red); }
.comment-body { flex:1; }
.comment-head { display:flex; align-items:center; gap:10px; }
.comment-author { color:var(--brand-red); font-size:13.5px; }
.comment-time { font-size:11.5px; color:var(--muted); }
.comment-text { font-size:13.5px; line-height:1.6; margin-top:3px; white-space:pre-line; }
.comment-reply-btn { display:inline-block; border:0; background:none; padding:0; margin-top:4px; font-size:12px; font-weight:600; color:var(--brand-red); }

/* Mời đăng nhập để bình luận */
.login-to-comment { display:flex; align-items:center; flex-wrap:wrap; gap:10px; background:#fdf2f4; border:1px solid var(--brand-red); border-radius:6px; padding:14px 16px; font-size:13.5px; color:var(--brand-red); font-weight:600; }
.login-to-comment i { font-size:18px; }
.login-to-comment span { flex:1; min-width:180px; }