/* ==========================================================================
   TRAWISE — ĐỒNG BỘ CHUYÊN MỤC / BÀI VIẾT / SIDEBAR THEO PHONG CÁCH v6
   --------------------------------------------------------------------------
   Nạp trên MỌI trang, NGAY SAU trawise-shell.css.

   Phạm vi: chỉ chạm vào phần "vỏ" do theme Flatsome sinh ra —
   breadcrumb, tiêu đề chuyên mục, thẻ bài viết, phân trang, sidebar,
   nút chia sẻ, khối bài viết liên quan.

   KHÔNG chạm vào .entry-content > nội dung bài viết. Nội dung bài do
   biên tập viên viết (có heading, bảng, khối CTA riêng) — sửa vào đó là
   đụng cấu trúc H2/H3 và ảnh hưởng SEO.

   Các template tự dựng (trang chủ v6, trang quốc gia, trang giới thiệu)
   không dùng những class này nên không bị ảnh hưởng.
   ========================================================================== */

/* Bộ biến dùng chung được khai báo một lần ở trawise-shell.css (--tw-s-*).
   Ở đây chỉ trỏ lại, kèm giá trị dự phòng phòng khi file này được nạp riêng.
   Đổi màu thương hiệu thì sửa đúng một chỗ: khối :root của trawise-shell.css. */
:root {
	--tw-c-f:      var(--tw-s-f, "Be Vietnam Pro", system-ui, -apple-system, sans-serif);
	--tw-c-brand:  var(--tw-s-brand,  #0042e8);
	--tw-c-brandd: var(--tw-s-brandd, #0034bd);
	--tw-c-ink:    var(--tw-s-ink,    #030712);
	--tw-c-ink2:   var(--tw-s-ink2,   #4b5163);
	--tw-c-ink3:   var(--tw-s-ink3,   #858b9c);
	--tw-c-line:   var(--tw-s-line,   #e2e6ee);
	--tw-c-mist:   #eef1f7;
	--tw-c-ease:   cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   1. CHỮ NỀN
   --------------------------------------------------------------------------
   Trang chủ v6 và 3 trang quốc gia dùng Be Vietnam Pro, phần còn lại của
   site vẫn đang là Bricolage Grotesque → nhìn như hai website khác nhau.
   Thống nhất về Be Vietnam Pro.
   ========================================================================== */

.blog-wrapper,
.blog-wrapper h1, .blog-wrapper h2, .blog-wrapper h3,
.blog-wrapper h4, .blog-wrapper h5, .blog-wrapper h6,
.sidebar, .sidebar h1, .sidebar h2, .sidebar h3, .sidebar h4, .sidebar h5,
.breadcrumb-blog,
.archive-page-header,
.comments-area {
	font-family: var(--tw-c-f);
}

/* ==========================================================================
   2. BREADCRUMB
   ========================================================================== */

.breadcrumb-blog {
	background: #fafbfd;
	border-bottom: 1px solid var(--tw-c-line);
	padding: 15px 0;
}
.breadcrumb-blog .breadcrumbs {
	font-size: 13px; color: var(--tw-c-ink3); letter-spacing: 0; text-transform: none;
}
.breadcrumbs a,
.breadcrumb-blog .breadcrumbs a {
	font-size: 13px; font-weight: 400; color: var(--tw-c-ink2);
	padding-right: 20px; margin-right: 6px;
	transition: color .18s var(--tw-c-ease);
}
.breadcrumbs a:hover,
.breadcrumb-blog .breadcrumbs a:hover { color: var(--tw-c-brand); }

/* Dấu phân cách: mũi tên chevron mảnh vẽ bằng CSS thay cho ký tự / */
.breadcrumbs a::before,
.breadcrumb-blog .breadcrumbs a::before {
	content: ""; position: absolute; right: 6px; top: 50%;
	width: 5px; height: 5px; margin-top: -3px;
	border-right: 1.4px solid #c3c9d6; border-bottom: 1.4px solid #c3c9d6;
	transform: rotate(-45deg); background: none;
}

/* ==========================================================================
   3. TIÊU ĐỀ CHUYÊN MỤC
   ========================================================================== */

.archive-page-header { margin-bottom: 34px; padding-bottom: 0; border-bottom: 0; }
.archive-page-header .page-title,
.archive-page-header h1.page-title,
.archive-page-header h1.page-title.is-large.uppercase {
	font-family: var(--tw-c-f);
	font-size: clamp(28px, 3.2vw, 42px); font-weight: 700; line-height: 1.18;
	letter-spacing: -0.03em; color: var(--tw-c-ink);
	text-transform: none; margin: 0;
	/* Kẻ nét đứt cũ → kẻ mảnh liền */
	padding-bottom: 22px;
	border-bottom: 1px solid var(--tw-c-line);
}
.archive-page-header .is-divider,
.archive-page-header .page-title + .is-divider { display: none; }

/* Tiêu đề của trang thường (Liên hệ, Đăng ký tư vấn…): style.css cũng
   gạch 2px nét đứt và ép chữ hoa. Xử lý cùng một kiểu với chuyên mục. */
h1.page-title,
h1.entry-title.mb,
.page-wrapper h1.entry-title.uppercase {
	font-family: var(--tw-c-f);
	font-size: clamp(28px, 3.2vw, 42px); font-weight: 700; line-height: 1.18;
	letter-spacing: -0.03em; color: var(--tw-c-ink);
	text-transform: none;
	padding-bottom: 22px; margin-bottom: 34px;
	border-bottom: 1px solid var(--tw-c-line);
}

.blog-archive .page-wrapper,
.blog-single .page-wrapper { padding-top: 56px; }

/* ==========================================================================
   4. THẺ BÀI VIẾT
   --------------------------------------------------------------------------
   Dùng chung cho danh sách chuyên mục, kết quả tìm kiếm và khối
   "Bài viết cùng chuyên mục" ở cuối bài.
   ========================================================================== */

/* Bỏ đường kẻ nét đứt kiểu cũ giữa các bài, thay bằng kẻ mảnh liền */
.blog-archive .post-item::after,
.blog-archive .post-item .col-inner::after { display: none; }

/* Kẻ nét đứt đen giữa các bài → kẻ mảnh liền màu nhạt.
   style.css dùng selector có ID (.blog-archive #macdinh .post-item .col-inner)
   nên bắt buộc phải có #macdinh mới thắng được, class thường không đủ. */
.blog-archive #macdinh .post-item .col-inner,
.search-results #macdinh .post-item .col-inner,
.blog-archive .large-columns-1 .post-item .col-inner,
.search-results .large-columns-1 .post-item .col-inner {
	border-bottom: 1px solid var(--tw-c-line);
	padding-bottom: 30px;
}
.blog-archive #macdinh .post-item:last-child .col-inner,
.blog-archive .large-columns-1 .post-item:last-child .col-inner,
.search-results .large-columns-1 .post-item:last-child .col-inner { border-bottom: 0; }

/* Ảnh: bo góc mềm, phóng nhẹ khi rê chuột */
.blog-archive .post-item .box-image,
.search-results .post-item .box-image,
.baiviet-moi .post-item .box-image {
	border-radius: 16px; overflow: hidden; background: var(--tw-c-mist);
}
.blog-archive .post-item .box-image img,
.baiviet-moi .post-item .box-image img {
	transition: transform .5s var(--tw-c-ease);
}
.blog-archive .post-item:hover .box-image img,
.baiviet-moi .post-item:hover .box-image img { transform: scale(1.05); }

/* Tiêu đề bài */
.blog-archive .post-item .post-title,
.search-results .post-item .post-title,
.baiviet-moi .post-item .post-title {
	font-family: var(--tw-c-f);
	font-size: 19px; font-weight: 600; line-height: 1.38;
	letter-spacing: -0.015em; text-transform: none; margin: 0 0 10px;
}
.blog-archive .post-item .post-title a,
.baiviet-moi .post-item .post-title a {
	color: var(--tw-c-ink); transition: color .18s var(--tw-c-ease);
}
.blog-archive .post-item:hover .post-title a,
.baiviet-moi .post-item:hover .post-title a { color: var(--tw-c-brand); }

/* Gạch phân cách nhỏ dưới tiêu đề của Flatsome — thừa, bỏ đi */
.blog-archive .post-item .is-divider,
.search-results .post-item .is-divider,
.baiviet-moi .post-item .is-divider { display: none; }

.blog-archive .post-item .from_the_blog_excerpt,
.search-results .post-item .from_the_blog_excerpt,
.baiviet-moi .post-item .from_the_blog_excerpt {
	font-size: 15px; line-height: 1.72; color: var(--tw-c-ink2); margin: 0 0 14px;
}

/* Nút "Xem thêm": đổi từ chữ hoa cam sang link chữ thường có mũi tên.
   Quy tắc cũ dùng ID (#macdinh) nên phải viết kèm ID mới đè được. */
.blog-archive #macdinh .post-item .box-text button.button,
.search-results #macdinh .post-item .box-text button.button,
.blog-archive .post-item .col-inner .box-text button.button,
.search-results .post-item .col-inner .box-text button.button,
.baiviet-moi .post-item .col-inner .box-text button.button,
.blog-archive .post-item button.button,
.search-results .post-item button.button,
.baiviet-moi .post-item button.button {
	font-family: var(--tw-c-f);
	font-size: 14.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
	color: var(--tw-c-brand); background: none; border: 0; box-shadow: none;
	padding: 0; min-height: 0; margin: 0;
}
.blog-archive #macdinh .post-item:hover .box-text button.button,
.blog-archive .post-item:hover button.button,
.baiviet-moi .post-item:hover button.button { color: var(--tw-c-brandd); }

/* ==========================================================================
   5. PHÂN TRANG
   ========================================================================== */

.nav-pagination { margin-top: 44px; }
.nav-pagination > li { margin: 0 4px; }
.nav-pagination > li > a,
.nav-pagination > li > span {
	font-family: var(--tw-c-f);
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; height: 42px; padding: 0 12px;
	border: 1px solid var(--tw-c-line); border-radius: 12px; background: #fff;
	font-size: 14.5px; font-weight: 500; color: var(--tw-c-ink2);
	transition: background-color .18s var(--tw-c-ease), border-color .18s var(--tw-c-ease), color .18s var(--tw-c-ease);
}
.nav-pagination > li > a:hover {
	border-color: var(--tw-c-brand); color: var(--tw-c-brand); background: #fff;
}
.nav-pagination > li > .current,
.nav-pagination > li > span.current {
	background: var(--tw-c-brand); border-color: var(--tw-c-brand); color: #fff;
}
.nav-pagination > li > .dots { border-color: transparent; background: none; }

/* ==========================================================================
   6. SIDEBAR
   ========================================================================== */

.sidebar .widget { margin-bottom: 38px; }

/* Tiêu đề widget: bỏ dải ruy-băng gradient có góc gấp kiểu cũ,
   thay bằng nhãn chữ nhỏ giãn cách như các nhãn phần ở trang chủ v6. */
.sidebar .widget-title,
.sidebar .widget > .widget-title,
.sidebar .widget-title span {
	background: none !important; background-image: none !important;
	border: 0 !important; box-shadow: none !important;
	padding: 0 !important; margin: 0 !important;
	color: var(--tw-c-ink3) !important;
	font-family: var(--tw-c-f);
	font-size: 12px !important; font-weight: 600; letter-spacing: .14em;
	text-transform: uppercase; line-height: 1.4;
}
.sidebar .widget-title::before,
.sidebar .widget-title::after,
.sidebar .widget-title span::before,
.sidebar .widget-title span::after { display: none !important; }
.sidebar .widget > .widget-title {
	display: block; padding-bottom: 14px !important;
	margin-bottom: 18px !important; border-bottom: 1px solid var(--tw-c-line) !important;
}

/* Danh sách bài viết mới: bỏ chữ hoa, cỡ chữ dễ đọc */
.sidebar .flatsome_recent_posts ul,
.sidebar .widget ul { list-style: none; margin: 0; padding: 0; }
.sidebar .widget ul li {
	margin: 0; padding: 13px 0; border-bottom: 1px solid var(--tw-c-line);
}
.sidebar .widget ul li:last-child { border-bottom: 0; padding-bottom: 0; }
.sidebar .widget ul li a {
	display: block;
	font-family: var(--tw-c-f);
	font-size: 15px; font-weight: 500; line-height: 1.5;
	letter-spacing: 0; text-transform: none; color: var(--tw-c-ink);
	transition: color .18s var(--tw-c-ease);
}
.sidebar .widget ul li a:hover { color: var(--tw-c-brand); }

/* Ô tìm kiếm trong sidebar */
.sidebar .searchform .flex-row {
	background: #f3f5f9; border: 1px solid transparent; border-radius: 999px;
	transition: background-color .2s var(--tw-c-ease), border-color .2s var(--tw-c-ease);
}
.sidebar .searchform .flex-row:focus-within { background: #fff; border-color: var(--tw-c-brand); }
.sidebar .searchform input.search-field {
	background: none; border: 0; box-shadow: none;
	height: 44px; font-size: 14.5px; padding-left: 18px; color: var(--tw-c-ink);
}
.sidebar .searchform button,
.sidebar .searchform .submit-button {
	background: none !important; border: 0 !important; box-shadow: none;
	color: var(--tw-c-ink3) !important; min-height: 44px; padding: 0 16px;
}
.sidebar .searchform button:hover { color: var(--tw-c-brand) !important; }

/* ==========================================================================
   7. FORM (đăng ký tư vấn ở sidebar và trong trang)
   ========================================================================== */

.sidebar input[type="text"],
.sidebar input[type="email"],
.sidebar input[type="tel"],
.sidebar textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	font-family: var(--tw-c-f);
	background: #fff; border: 1px solid var(--tw-c-line); border-radius: 12px;
	box-shadow: none; font-size: 14.5px; color: var(--tw-c-ink);
	padding: 12px 16px; min-height: 46px;
	transition: border-color .18s var(--tw-c-ease), box-shadow .18s var(--tw-c-ease);
}
.sidebar textarea, .wpcf7 textarea { min-height: 110px; }
.sidebar input:focus, .sidebar textarea:focus,
.wpcf7 input:focus, .wpcf7 textarea:focus {
	border-color: var(--tw-c-brand);
	box-shadow: 0 0 0 3px rgba(0, 66, 232, .12);
	outline: none;
}
.sidebar input::placeholder, .wpcf7 input::placeholder, .wpcf7 textarea::placeholder {
	color: #98a0b3;
}

.wpcf7 input[type="submit"],
.sidebar input[type="submit"] {
	font-family: var(--tw-c-f);
	background: var(--tw-c-brand); border: 0; border-radius: 999px; color: #fff;
	font-size: 14.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
	padding: 0 28px; min-height: 46px; box-shadow: none;
	transition: background-color .2s var(--tw-c-ease), transform .2s var(--tw-c-ease);
}
.wpcf7 input[type="submit"]:hover,
.sidebar input[type="submit"]:hover {
	background: var(--tw-c-brandd); transform: translateY(-2px);
}

/* ==========================================================================
   8. TRANG BÀI VIẾT
   ========================================================================== */

/* Tiêu đề bài viết */
.blog-single .entry-header-text .entry-title,
.blog-single .entry-header-text h1 {
	font-family: var(--tw-c-f);
	font-size: clamp(27px, 3vw, 40px); font-weight: 700; line-height: 1.22;
	letter-spacing: -0.03em; color: var(--tw-c-ink);
	text-transform: none; margin: 0 0 18px;
}
.blog-single .entry-header .is-divider { display: none; }
.blog-single .entry-header-text { padding-bottom: 22px; margin-bottom: 34px; }
/* style.css gạch 2px nét đứt xám dưới tiêu đề — đổi sang kẻ mảnh liền.
   Selector phải dài đúng bằng bản gốc mới đè được. */
header.entry-header .entry-header-text h1.entry-title,
.blog-single .entry-header-text h1.entry-title {
	border-bottom: 1px solid var(--tw-c-line);
	padding-bottom: 20px;
}
.blog-single .entry-meta { font-size: 13.5px; color: var(--tw-c-ink3); letter-spacing: 0; text-transform: none; }

/* Nút chia sẻ: vòng tròn nhỏ, xám trung tính, chuyển sang xanh khi rê chuột.
   Bản cũ là vòng tròn to tô màu từng mạng, nhìn nặng và lỗi thời. */
.blog-share { margin: 44px 0 0; padding-top: 26px; border-top: 1px solid var(--tw-c-line); }
.blog-share .social-icons a.button.circle {
	background: #f3f5f9 !important; background-image: none !important;
	border: 0 !important; box-shadow: none !important;
	width: 38px !important; height: 38px !important; line-height: 38px !important;
	color: var(--tw-c-ink2) !important; margin: 0 6px 0 0;
	transition: background-color .18s var(--tw-c-ease), color .18s var(--tw-c-ease), transform .18s var(--tw-c-ease);
}
.blog-share .social-icons a.button.circle:hover {
	background: var(--tw-c-brand) !important; color: #fff !important; transform: translateY(-2px);
}
.blog-share .social-icons a.button.circle i,
.blog-share .social-icons a.button.circle i::before { color: inherit !important; opacity: 1; }

/* Hai khối cuối bài: "Bài viết cùng chuyên mục" (#related_posts) và
   "Bài viết mới" (.baiviet-moi). Cùng markup nên gộp chung quy tắc. */
.baiviet-moi,
#related_posts { margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--tw-c-line); }

/* style.css dùng selector có ID cho tiêu đề khối liên quan → phải viết
   kèm ID mới bỏ được chữ hoa và kẻ nét đứt. */
div#related_posts > h3,
.baiviet-moi > h3,
.baiviet-moi > h3 span {
	font-family: var(--tw-c-f);
	font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; line-height: 1.25;
	letter-spacing: -0.025em; color: var(--tw-c-ink);
	text-transform: none; margin: 0 0 28px;
	background: none; border: 0; padding: 0;
}
div#related_posts > h3::after, div#related_posts > h3::before,
.baiviet-moi > h3::after, .baiviet-moi > h3::before { display: none; }
/* Gạch 2px nét đứt nằm trên thẻ <span> bên trong h3 → gỡ luôn */
div#related_posts > h3,
div#related_posts h3 span { border-bottom: 0; padding-bottom: 0; }

/* Trong thẻ liên quan, .post-title là một DIV bọc cả link tiêu đề, đoạn
   tóm tắt và nút — không phải chỉ mỗi tiêu đề. Nên phải cắt dòng riêng
   cho từng phần, cắt cả cụm thì chữ bị đứt ngang giữa dòng. */
.releted-post .post-item .box-text .post-title,
#related_posts .post-item .post-title,
.baiviet-moi .post-item .post-title {
	display: block; overflow: visible; height: auto; max-height: none;
}
/* .box-text của Flatsome bị ép chiều cao cố định trong style.css → bỏ,
   để thẻ tự cao theo nội dung (các thẻ vẫn bằng nhau nhờ lưới flex) */
.releted-post .post-item .box-text,
#related_posts .post-item .box-text,
.baiviet-moi .post-item .box-text { height: auto; max-height: none; overflow: visible; }
#related_posts .post-item .post-title > a.title,
.baiviet-moi .post-item .post-title > a.title {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; margin-bottom: 8px;
	font-weight: 600; line-height: 1.4;
}
/* Thẻ ở khối "Bài viết cùng chuyên mục" / "Bài viết mới" chỉ rộng 1/4
   hàng. style.css ép đoạn tóm tắt cao đúng 53px — không chia hết cho
   chiều cao dòng nên dòng cuối luôn bị cắt còn một nửa, nhìn như lỗi.
   Bỏ hẳn đoạn tóm tắt ở hai khối này, chỉ để ảnh + tiêu đề, đúng kiểu
   thẻ tin tức ở trang chủ v6.

   LƯU Ý: chỉ ẩn trong hai khối này. Danh sách chuyên mục vẫn giữ nguyên
   đoạn tóm tắt vì ở đó thẻ rộng, tóm tắt hiển thị đủ và có ích. */
.releted-post .post-item .box-text .from_the_blog_excerpt,
#related_posts .post-item .from_the_blog_excerpt,
.baiviet-moi .post-item .from_the_blog_excerpt {
	/* display:none là cách ẩn trung thực và dễ hiểu nhất với công cụ tìm
	   kiếm (đừng dùng font-size:0 hay text-indent âm — đó mới là mấy chiêu
	   bị coi là che giấu nội dung).

	   Đoạn tóm tắt này là bản sao y hệt đoạn đã có ở trang chuyên mục và ở
	   chính bài viết, nên ẩn đi không mất nội dung nào của website. */
	display: none;
}

/* Trong thẻ liên quan, cả thẻ đã là một link rồi nên nút "Xem thêm" bên
   trong là thừa. Ẩn đi để nội dung vừa khít chiều cao thẻ, không bị lòi
   nửa dòng chữ ra mép dưới. Ở danh sách chuyên mục thì vẫn giữ nút. */
#related_posts .post-item .box-text button.button,
.baiviet-moi .post-item .box-text button.button { display: none; }

/* Cho phần chữ tự giãn hết chiều cao còn lại của thẻ, chừa đệm dưới */
#related_posts .post-item .col-inner,
.baiviet-moi .post-item .col-inner { display: flex; flex-direction: column; }
#related_posts .post-item .col-inner > a.plain,
.baiviet-moi .post-item .col-inner > a.plain { display: flex; flex: 1 1 auto; }
#related_posts .post-item .box,
.baiviet-moi .post-item .box { display: flex; flex-direction: column; width: 100%; }
#related_posts .post-item .box-text,
.baiviet-moi .post-item .box-text { flex: 1 1 auto; }
#related_posts .post-item .col-inner,
.baiviet-moi .post-item .col-inner {
	background: #fff; border: 1px solid var(--tw-c-line); border-radius: 18px;
	overflow: hidden; box-shadow: none;
	transition: border-color .2s var(--tw-c-ease), transform .2s var(--tw-c-ease);
}
#related_posts .post-item:hover .col-inner,
.baiviet-moi .post-item:hover .col-inner {
	border-color: var(--tw-c-brand); transform: translateY(-4px);
}
#related_posts .post-item .box-image,
.baiviet-moi .post-item .box-image { border-radius: 0; }
#related_posts .post-item .box-text,
.baiviet-moi .post-item .box-text { padding: 18px 18px 20px !important; }
#related_posts .post-item .post-title,
.baiviet-moi .post-item .post-title { font-size: 16px; line-height: 1.4; }
#related_posts .post-item .post-title a { color: var(--tw-c-ink); }
#related_posts .post-item:hover .post-title a { color: var(--tw-c-brand); }
#related_posts .post-item .from_the_blog_excerpt,
.baiviet-moi .post-item .from_the_blog_excerpt { font-size: 14px; line-height: 1.6; }
#related_posts .post-item .box-image,
.baiviet-moi .post-item .box-image { background: var(--tw-c-mist); }

/* Khu vực bình luận */
.comments-area { margin-top: 56px; }
.comments-area h3, .comments-area h2 {
	font-family: var(--tw-c-f); font-size: 22px; font-weight: 700;
	letter-spacing: -0.02em; text-transform: none;
}

/* ==========================================================================
   9. TRANG TÌM KIẾM
   ========================================================================== */

.search-results .archive-page-header .page-title { text-transform: none; }

/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */

@media (max-width: 849px) {
	.blog-archive .page-wrapper, .blog-single .page-wrapper { padding-top: 34px; }
	.baiviet-moi { margin-top: 40px; padding-top: 32px; }
	.blog-archive .large-columns-1 .post-item { padding-bottom: 24px; margin-bottom: 24px; }
	.nav-pagination > li > a, .nav-pagination > li > span { min-width: 38px; height: 38px; }
}