/*!
Theme Name: BEW Clinic Theme
Theme URI: http://underscores.me/
Author: Dr Tarex
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: bewell
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Bewell is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

.ajax_loading{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	justify-content: center;
	align-items: center;
	display: flex;
	background: rgba(255, 255, 255, .3);
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}
.ajax_loading.show{
	opacity: 1;
	visibility: visible;
}
.ajax_loading .lds-ellipsis {
    display: block;
    position: relative;
    width: 80px;
    height: 80px;
    text-align: center;
    margin: 0 auto; }
.ajax_loading .lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #0091D1;
    animation-timing-function: cubic-bezier(0, 1, 1, 0); }
.ajax_loading .lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite; }
.ajax_loading .lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite; }
.ajax_loading .lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite; }
.ajax_loading .lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite; }
@keyframes lds-ellipsis1 {
	0% {
		transform: scale(0); }
	100% {
		transform: scale(1); } }
@keyframes lds-ellipsis3 {
	0% {
		transform: scale(1); }
	100% {
		transform: scale(0); } }
@keyframes lds-ellipsis2 {
	0% {
		transform: translate(0, 0); }
	100% {
		transform: translate(24px, 0); } }
.grecaptcha-badge{ visibility: hidden;}



/* --- Tối ưu lại Container để cân bằng layout --- */
.category-main-content {
    background-color: #f8fafc; /* Nền xám nhẹ giúp các card bài viết màu trắng nổi bật lên */
    padding: 60px 0;
}

.content-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Tối ưu Banner (Hero) sang trọng hơn --- */
.custom-category-hero {
    padding: 120px 0; /* Tăng padding để banner cao và thoáng hơn */
    text-align: center;
    background-size: cover;
    background-position: center;
    color: #ffffff;
    position: relative;
}

/* Nếu không có ảnh, dùng màu xanh y tế sâu lắng làm chủ đạo */
.custom-category-hero.no-bg {
    background: linear-gradient(135deg, #111827 0%, #0f766e 100%); 
}

.hero-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-description {
    font-size: 1.15rem;
    max-width: 650px;
    margin: 0 auto;
    opacity: 0.95;
    line-height: 1.6;
}

/* --- Định hình lại cấu trúc Grid --- */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}

/* --- Cách tân Card bài viết theo phong cách Clinic sạch sẽ --- */
.post-card {
    background: #ffffff;
    border-radius: 16px; /* Bo góc mềm mại hơn */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); /* Đổ bóng cực mịn */
    border: 1px solid #edf2f7; /* Đường viền mảnh tinh tế */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.post-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(15, 118, 110, 0.08); /* Đổ bóng có ánh xanh thương hiệu */
    border-color: #0f766e;
}

/* Cố định tỷ lệ ảnh đại diện 16:9 để các card luôn bằng nhau */
.post-card-thumbnail {
    position: relative;
    padding-top: 56.25%; /* Tỷ lệ 16:9 chuẩn */
    overflow: hidden;
    background-color: #e2e8f0;
}

.post-card-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Chi tiết bên trong Card --- */
.post-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.post-date {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
    margin-bottom: 12px;
}

.post-card-title {
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: 600;
    margin: 0 0 12px 0;
}

.post-card-title a {
    color: #1e293b;
    text-decoration: none;
    transition: color 0.2s ease;
}

.post-card-title a:hover {
    color: #0f766e; /* Màu xanh thương hiệu khi hover */
}

.post-card-excerpt {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 20px;
    /* Giới hạn hiển thị tối đa 3 dòng văn bản, tránh excerpt quá dài */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Nút đọc tiếp dạng Text Link cao cấp --- */
.read-more-btn {
    align-self: flex-start;
    margin-top: auto;
    font-size: 0.9rem;
    color: #0f766e;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: gap 0.2s ease;
}

.read-more-btn:hover {
    gap: 8px; /* Hiệu ứng đẩy mũi tên nhẹ khi hover */
}

/* --- Bộ phân trang chuẩn chỉ --- */
.custom-pagination {
    text-align: center;
    margin-top: 50px;
}

.custom-pagination .page-numbers {
    display: inline-block;
    width: 42px;
    height: 42px;
    line-height: 42px;
    margin: 0 4px;
    background: #ffffff;
    color: #334155;
    text-decoration: none;
    border-radius: 50%; /* Chuyển thành nút tròn hiện đại */
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
}

.custom-pagination .page-numbers.current,
.custom-pagination .page-numbers:hover {
    background: #0f766e;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.2);
}