/* =========================================================
   eBaohiem NEWS - bài viết chi tiết + danh sách tin tức
   Load cùng ebaohiem-ui.css trên news_layout.php
   ========================================================= */

.eb-article-page{padding:32px 0 64px}

/* ---------- Breadcrumb ---------- */
.eb-breadcrumb{font-size:13px;color:var(--eb-grey);margin-bottom:20px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.eb-breadcrumb a{color:var(--eb-blue);font-weight:600}
.eb-breadcrumb span{color:var(--eb-grey)}

/* ---------- Layout 2 cột: nội dung + sidebar ---------- */
.eb-article-layout{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}

/* =========================================================
   TYPOGRAPHY nội dung bài viết (#article-body)
   ========================================================= */
#article-body{font-size:15.5px;color:var(--eb-ink)}
#article-body h1{font-size:clamp(24px,3.2vw,34px);margin-bottom:16px;color:var(--eb-blue-ink)}
#article-body h2{font-size:22px;margin:36px 0 14px;color:var(--eb-blue-ink)}
#article-body h3{font-size:18px;margin:26px 0 12px;color:var(--eb-blue-deep)}
#article-body h4{font-size:16px;margin:20px 0 10px;color:var(--eb-blue-deep)}
#article-body p{margin-bottom:16px;line-height:1.75}
#article-body ul,#article-body ol{margin:0 0 16px;padding-left:22px}
#article-body li{margin-bottom:8px}
#article-body a{color:var(--eb-blue);text-decoration:underline}
#article-body img{max-width:100%;height:auto;border-radius:12px;margin:16px 0}
#article-body blockquote{border-left:4px solid var(--eb-orange);background:var(--eb-orange-soft);padding:14px 18px;border-radius:0 10px 10px 0;margin:20px 0;font-size:15px;color:var(--eb-blue-deep)}
#article-body strong{color:var(--eb-blue-ink)}
#article-body iframe{max-width:100%}

/* Bảng trong bài viết - bọc .eb-table-scroll bằng JS để scroll ngang trên mobile */
.eb-table-scroll{overflow-x:auto;margin:20px 0;border:1px solid var(--eb-border);border-radius:12px}
#article-body table{width:100%;min-width:560px;border-collapse:collapse;font-size:14px;background:#fff}
#article-body table th,#article-body table td{padding:12px 14px;border-bottom:1px solid var(--eb-border);text-align:left}
#article-body table thead th{background:var(--eb-blue-deep);color:#fff;font-family:var(--font-display);font-weight:700;font-size:13px;text-transform:uppercase}
#article-body table tbody tr:nth-child(even) td{background:var(--eb-bg)}

/* =========================================================
   CTA chèn trong bài viết (thay cho khối inline cũ của Moncover)
   ========================================================= */
.eb-cta-inline{text-align:center;margin:28px 0;clear:both}
.eb-cta-inline .btn{padding:13px 32px}
.eb-cta-box{background:var(--eb-bg);border:1px solid var(--eb-border);border-radius:14px;padding:26px 20px;text-align:center;margin:32px 0 8px}
.eb-cta-box p{font-weight:700;color:var(--eb-blue-ink);margin-bottom:14px;font-size:16px}

/* =========================================================
   SIDEBAR: bài viết liên quan + CTA tư vấn
   ========================================================= */
.eb-sidebar__box{background:#fff;border:1px solid var(--eb-border);border-radius:14px;padding:20px;margin-bottom:20px}
.eb-sidebar__title{font-family:var(--font-display);font-size:15px;font-weight:800;color:var(--eb-blue-ink);margin-bottom:14px}
.eb-related-list{display:flex;flex-direction:column;gap:14px;list-style:none}
.eb-related-item{display:flex;gap:12px;align-items:flex-start;text-decoration:none}
.eb-related-item__thumb{width:64px;height:64px;border-radius:8px;overflow:hidden;flex:0 0 auto;background:var(--eb-bg)}
.eb-related-item__thumb img{width:100%;height:100%;object-fit:cover}
.eb-related-item__title{font-size:13.5px;font-weight:600;color:var(--eb-ink);line-height:1.4;transition:color .15s}
.eb-related-item:hover .eb-related-item__title{color:var(--eb-blue)}
.eb-sidebar__cta p{font-size:13.5px;color:var(--eb-grey);margin-bottom:14px}

/* Trường hợp news_same/related_news trả về HTML render sẵn (string) */
.eb-related-raw{font-size:13px}
.eb-related-raw ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.eb-related-raw img{max-width:64px;height:64px;object-fit:cover;border-radius:8px}
.eb-related-raw a{color:var(--eb-ink);text-decoration:none;font-weight:600}
.eb-related-raw a:hover{color:var(--eb-blue)}
.eb-related-raw h2,.eb-related-raw h3,.eb-related-raw h4{display:none} /* tránh tiêu đề "Tin liên quan" trùng với .eb-sidebar__title */

/* =========================================================
   TAGS
   ========================================================= */
.eb-tags{margin-top:32px;padding-top:20px;border-top:1px solid var(--eb-border);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.eb-tags__label{font-weight:700;font-size:13.5px;color:var(--eb-blue-ink)}
.eb-tag{background:var(--eb-bg);border:1px solid var(--eb-border);border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:600;color:var(--eb-blue-deep);text-decoration:none;transition:.15s}
.eb-tag:hover{background:var(--eb-blue);color:#fff;border-color:var(--eb-blue)}

/* =========================================================
   DANH SÁCH TIN TỨC (1 cột ảnh + 1 cột sapo, sidebar bên phải)
   ========================================================= */
.eb-list-heading{font-size:clamp(22px,3vw,32px);margin-bottom:24px;color:var(--eb-blue-ink)}
.eb-news-list{display:flex;flex-direction:column}
.eb-list-item{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--eb-border);text-decoration:none;color:inherit}
.eb-news-list .eb-list-item:first-of-type{padding-top:0}
.eb-list-item__thumb{flex:0 0 260px;height:160px;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,var(--eb-blue),var(--eb-blue-deep));display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:.05em;text-transform:uppercase}
.eb-list-item__thumb img{width:100%;height:100%;object-fit:cover}
.eb-list-item__body{flex:1;min-width:0}
.eb-list-item__date{font-size:12.5px;font-weight:700;color:var(--eb-orange);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.eb-list-item__title{font-family:var(--font-body);font-size:18px;font-weight:700;color:var(--eb-blue-ink);line-height:1.4;margin-bottom:8px;transition:color .15s}
.eb-list-item:hover .eb-list-item__title{color:var(--eb-blue)}
.eb-list-item__sapo{font-size:14px;color:var(--eb-grey);line-height:1.6;margin-bottom:8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.eb-list-item__more{font-size:13px;font-weight:700;color:var(--eb-blue)}

/* Pagination wrapper */
.eb-pagination{margin-top:24px}
.eb-pagination .pagination{justify-content:center}

/* Ẩn breadcrumb cũ (dạng <ol>) còn lẫn trong nội dung CMS - đã có
   .eb-breadcrumb riêng ở đầu trang */
#article-body > ol.breadcrumb,
#article-body .breadcrumb,
.eb-article-layout > .breadcrumb{display:none!important}

@media (max-width:640px){
  .eb-list-item{flex-direction:column;gap:12px}
  .eb-list-item__thumb{flex:none;width:100%;height:200px}
}


/* =========================================================
   BOOTSTRAP-GRID SHIM
   Các view list cũ (news/news_grid/news_categories_grid/news_search...)
   dùng class .row/.col-md-*/.media/.pagination/.label/.well/.form-control
   của Bootstrap. Vì không load bootstrap.css nữa, định nghĩa lại tối
   thiểu để layout/list/sidebar vẫn hiển thị hợp lý + responsive đúng.
   ========================================================= */
#article-body .row,
.eb-article-layout .row{display:flex;flex-wrap:wrap;margin:0 -10px}
#article-body [class*="col-"],
.eb-article-layout [class*="col-"]{padding:0 10px;box-sizing:border-box;width:100%}

@media (min-width:768px){
  .col-md-1{width:8.3333%}.col-md-2{width:16.6667%}.col-md-3{width:25%}
  .col-md-4{width:33.3333%}.col-md-5{width:41.6667%}.col-md-6{width:50%}
  .col-md-7{width:58.3333%}.col-md-8{width:66.6667%}.col-md-9{width:75%}
  .col-md-10{width:83.3333%}.col-md-11{width:91.6667%}.col-md-12{width:100%}
  .col-sm-1{width:8.3333%}.col-sm-2{width:16.6667%}.col-sm-3{width:25%}
  .col-sm-4{width:33.3333%}.col-sm-5{width:41.6667%}.col-sm-6{width:50%}
  .col-sm-7{width:58.3333%}.col-sm-8{width:66.6667%}.col-sm-9{width:75%}
  .col-sm-10{width:83.3333%}.col-sm-11{width:91.6667%}.col-sm-12{width:100%}
}

/* Media object (item tin trong danh sách) */
#article-body .media,
.eb-article-layout .media{display:flex;gap:14px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--eb-border)}
#article-body .media:last-child,
.eb-article-layout .media:last-child{border-bottom:none}
#article-body .media-left,
.eb-article-layout .media-left{flex:0 0 auto}
#article-body .media-body,
.eb-article-layout .media-body{flex:1}
#article-body .media-body h3,
#article-body .media-body h4,
.eb-article-layout .media-body h3,
.eb-article-layout .media-body h4{margin:0 0 6px;font-size:16px}
#article-body .media-body h3 a,
#article-body .media-body h4 a,
.eb-article-layout .media-body h3 a,
.eb-article-layout .media-body h4 a{color:var(--eb-blue-ink);text-decoration:none;font-family:var(--font-body)}
#article-body .media-body h3 a:hover,
#article-body .media-body h4 a:hover,
.eb-article-layout .media-body h3 a:hover,
.eb-article-layout .media-body h4 a:hover{color:var(--eb-blue)}
#article-body .media-body p,
.eb-article-layout .media-body p{font-size:13.5px;color:var(--eb-grey);margin-bottom:6px}

/* Thumbnail / card ảnh */
#article-body .thumbnail,
.eb-article-layout .thumbnail{border:1px solid var(--eb-border);border-radius:10px;padding:0;overflow:hidden;display:block;background:#fff}
#article-body .thumbnail img,
.eb-article-layout .thumbnail img{width:100%;height:auto;display:block}

/* Pagination */
.pagination{display:flex;gap:6px;list-style:none;flex-wrap:wrap;margin:32px 0 0;padding:0}
.pagination li a,.pagination li span{display:flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border:1px solid var(--eb-border);border-radius:8px;color:var(--eb-blue-deep);font-weight:600;font-size:14px;text-decoration:none;background:#fff}
.pagination li.active a,.pagination li.active span,.pagination li a:hover{background:var(--eb-blue);color:#fff;border-color:var(--eb-blue)}

/* Label / badge nhỏ (vd: chuyên mục, "Mới") */
.label,.badge{display:inline-flex;align-items:center;background:var(--eb-orange-soft);color:var(--eb-orange);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:4px 10px;border-radius:6px}

/* Khung box (well) - dùng cho ô tìm kiếm, lọc... */
.well{background:#fff;border:1px solid var(--eb-border);border-radius:12px;padding:18px;margin-bottom:20px}

/* Form tìm kiếm tin tức */
.form-control{width:100%;padding:11px 14px;border:1.5px solid var(--eb-border);border-radius:10px;font-family:var(--font-body);font-size:14.5px;background:#fff;color:var(--eb-ink)}
.form-control:focus{border-color:var(--eb-blue);outline:none}
.input-group{display:flex}
.input-group .form-control{border-radius:10px 0 0 10px}
.input-group .input-group-btn .btn,.input-group-append .btn{border-radius:0 10px 10px 0}
.btn-default{background:#fff;color:var(--eb-blue-deep);border:1.5px solid var(--eb-border)}
.btn-default:hover{background:var(--eb-bg)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:960px){
  .eb-article-layout{grid-template-columns:1fr}
  .eb-sidebar{order:2}
}
@media (max-width:768px){
  #article-body .row,
  .eb-article-layout .row{margin:0}
  #article-body [class*="col-"],
  .eb-article-layout [class*="col-"]{width:100%;padding:0}
  #article-body .media,
  .eb-article-layout .media{flex-direction:column}
}