.text--gradient {	
    background: var(--gradient);
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.homenest__blog-page {
    margin-top: 150px;
    padding: 0 40px;
}
.custom-f-container {
    max-width: 768px;
    margin: 0px auto;
    background: radial-gradient(164.75% 100% at 50% 0%, #f7f7f9 0%, #d9dbe4 48.73%);
    padding: 20px;
    border-radius: 24px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
/* ========== FAKE SELECT WRAPPER ========== */
.fake-select {
    position: relative;
    width: 100%;
    font-family: inherit;
}

/* ========== TRIGGER ========== */
.fake-select-trigger {
    padding: 15px 10px 15px 20px;
    border: 1.5px solid #6c7cff;
    border-radius: 16px;
    background: #fff;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: border-color .25s ease;
}

/* hover / focus */
.fake-select-trigger:hover {
    border-color: #1A85F8;
}

/* ========== VALUE TEXT ========== */
.fake-select-value {
    font-size: 15px;
    color: #111;
}

/* placeholder */
.fake-select-value.is-placeholder {
    color: #999;
}

/* ========== ARROW ========== */
.fake-select-arrow {
    width: 8px;
    height: 8px;
    border-right: 2px solid #6c7cff;
    border-bottom: 2px solid #6c7cff;
    transform: rotate(45deg);
    transition: transform .25s ease;
}

/* open state */
.fake-select.open .fake-select-arrow {
    transform: rotate(-135deg);
}

/* ========== OPTIONS DROPDOWN ========== */
.fake-select-options {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,.15);
    overflow: hidden;

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .25s ease;
    z-index: 99;
}

/* open */
.fake-select.open .fake-select-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ========== OPTION ITEM ========== */
.fake-option {
    padding: 10px 18px;
    font-size: 15px;
    cursor: pointer;
    transition: background .2s ease;
}

/* hover */
.fake-option:hover {
    background: #f3f5ff;
}

/* selected */
.fake-option.is-selected {
    background: #e9ecff;
    font-weight: 500;
}
.custom-f-title { text-align: center; font-weight: bold; color: #374151; margin-bottom: 20px; font-size: 1.15rem; }
.custom-f-card { background: white; padding: 25px 20px; border-radius: 20px; }

/* Grid Layout */
.custom-f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.custom-f-field .wpcf7-not-valid-tip {
	font-size: 0.8em;
}
/* Input Fields */
.custom-f-field { position: relative; margin-bottom: 15px; }
.f-input {
    width: 100% !important;
    border: 1px solid #B2C1F9 !important;
    border-radius: 15px !important;
    padding: 20px 10px 10px 45px !important;
    font-size: 14px !important;
    background: white !important;
    box-sizing: border-box;
}
/* Triệt tiêu thẻ br và p thừa của CF7 */
.custom-f-grid br, 
.custom-f-card br{
    display: none !important;
}
.custom-f-field.f-msg .wpcf7-form-control.wpcf7-textarea{
	height: 100px;
}
/* Đảm bảo span bao quanh input không chiếm diện tích lạ */
.wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}
/* Floating Labels */
.f-label {
    position: absolute; 
	left: 45px; 
	top: 14px;
    font-size: 14px; 
	color: #9ca3af;
    pointer-events: none; 
	transition: 0.3s;
}
/* 1. Sửa lại Selector: Khi vùng chứa có input được focus hoặc có chữ */
.custom-f-field:has(.f-input:focus) .f-label,
.custom-f-field:has(.f-input:not(:placeholder-shown)) .f-label,
.f-label-select {
    transform: translateY(-25px) scale(0.8) !important;
    left: 12px !important;
    color: #4A5568 !important;
    font-weight: 600;
    background: white;
    padding: 0 5px;
    z-index: 10;
}

/* TẠO ICON BẰNG CSS ĐỂ TRÁNH LỖI 403 */
.custom-f-field::before {
    content: "";
    position: absolute; left: 15px; top: 19px;
    width: 14.5px; height: 14.5px;
    background-color: #9ca3af;
    z-index: 1;
}
.custom-f-field.f-select::before{
	right: 15px;
	left: initial;
	top: 16px;
}
/* Icon cho từng field (dùng icon có sẵn của hệ thống hoặc mã hóa) */
.f-user::before { mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>") no-repeat center; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>") no-repeat center; }
.f-email::before { mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg>") no-repeat center; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg>") no-repeat center; }
.f-phone::before { mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>") no-repeat center; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>") no-repeat center; }
.f-select::before { mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat center; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat center; }
.f-msg::before { mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/></svg>") no-repeat center; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/></svg>") no-repeat center; }

/* Submit Button */
.f-submit {
    width: 100% !important; background-color: #0f172a !important; color: white !important;
    padding: 15px !important; border-radius: 15px !important; border: none !important;
    font-weight: bold !important; cursor: pointer; transition: 0.2s; white-space: pre-wrap;
}
.f-submit:hover { background-color: #1e293b !important; transform: scale(0.98); }

/* Fix CF7 Spacing */
.wpcf7-form-control-wrap { display: block; }
.text-red { color: #ef4444; }
.f-input {
    transition: all 0.3s ease !important; /* Thêm hiệu ứng mượt cho mọi thay đổi */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}
.custom-f-field.f-select .f-input{
	padding: 15px 10px 15px 45px !important;
}
.wpcf7-spinner{
	display: none;
}
.f-input:focus {
    border-color: #4A5568 !important; /* Màu xám đậm hơn khi focus */
    background-color: #fff !important;
    box-shadow: 0 4px 12px rgba(178, 193, 249, 0.2) !important; /* Đổ bóng nhẹ màu xanh */
    outline: none;
}
.f-input:focus + .f-label,
.f-input:not(:placeholder-shown) + .f-label {
    transform: translateY(-18px) scale(0.75) !important; /* Đẩy cao hơn một chút */
    left: 12px !important;
    color: #4A5568 !important;
    font-weight: 600;
    background: white; /* Tạo lớp nền trắng để nhãn không bị gạch ngang bởi border */
    padding: 0 5px;
}
.f-submit {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    letter-spacing: 0.5px;
}

.f-submit:hover {
    background-color: #1a202c !important;
    transform: translateY(-2px) scale(1.01) !important; /* Nhích nhẹ lên trên thay vì thu nhỏ */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2) !important;
}

.f-submit:active {
    transform: translateY(0) scale(0.98) !important; /* Hiệu ứng nhấn nút */
}
.custom-f-field:focus-within::before {
    background-color: #4A5568; /* Icon đậm lên khi đang focus vào ô đó */
    transition: background-color 0.3s ease;
}
.f-msg::before {
    top: 22px !important; /* Căn icon lên phía trên đầu của ô tin nhắn */
}
.homenest__blog-page__container {
    max-width: 1350px;
    margin: 0 auto;
    display: flex;
    gap: 72px;
    align-items: stretch;
    margin-bottom: 100px;
}

.homenest__blog-page__blog-grid {
    --col-gap: 40px;
    --row-gap: 30px;
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--row-gap) var(--col-gap);
}

.homenest__blog-page__item-1 {
    border: 1px solid #adadad;
    border-radius: 24px;
    overflow: hidden;
}

.homenest__blog-page__item-1:not(:first-of-type) {
    width: calc(50% - var(--col-gap )/ 2);
}

.homenest__blog-page__item-1__inner {
    position: relative;
    border-bottom: 1px solid #66e5fb;
}

.homenest__blog-page__item-1__meta {
    position: absolute;
    bottom: -3px;
    left: 0;
    background: #fff;
    text-align: center;
    padding: 14px 32px;
    border-radius: 20px 20px 0 0;
    font-size: 14px;
    border-top: 1px solid #66e5fb;
    border-right: 1px solid #66e5fb;
}

.homenest__blog-page__item-1__meta::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ffffff00;
    border-color: #66e5fb;
    border-style: solid;
    border-width: 0 0 1px 1px;
    border-bottom-left-radius: 100%;
    bottom: 2px;
    left: 100%;
    box-shadow: -4px 4px 0px 4px #ffffff;
}

a.homenest__blog-page__item-1__meta-author {
    text-decoration: none;
    color: #181818;
}

.homenest__blog-page__item-1__thumbnail {
    display: block;
    overflow: hidden;
}

.homenest__blog-page__item-1__thumbnail img {
    aspect-ratio: 16/9;
    width: 100%;
    object-fit: cover;
	margin-bottom: -4px;
}

.homenest__blog-page__item-1__content {
    padding: 28px 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.homenest__blog-page__item-1__title {
    margin-bottom: 10px;
}

.homenest__blog-page__item-1__title,
.homenest__blog-page__item-2__title{
    line-height: 140%;
    font-size: 21px;
    font-weight: 500;
    letter-spacing: -0.5px;
	
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
	 -webkit-line-clamp: 2;
}

.homenest__blog-page__item-1__title a, .homenest__blog-page__item-2__title a {
    text-decoration: none;
    -webkit-text-decorations-in-effect: none;
}

.homenest__blog-page__item-1__excerpt, .homenest__blog-page__item-2__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 15px;
    line-height: 150%;
    color: #303030;
}

.homenest__blog-page__item-1__excerpt {
	 -webkit-line-clamp: 2;
}
   
.homenest__blog-page__item-2__excerpt{
	 -webkit-line-clamp: 3;
}

.homenest__blog-page__item-1__category {
    font-size: 14px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 1;
    color: #7b7b7b;
}

.homenest__blog-page__item-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.homenest__blog-page__item-2:not(:nth-of-type(n + 41)) {
    padding-bottom: 50px;
    border-bottom: 1px solid #000000;
    margin-bottom: 18px;
}

.homenest__blog-page__item-2__content {
    width: 69%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.homenest__blog-page__item-2__date-box {
    max-width: 270px;
    text-align: left;
}

.homenest__blog-page__item-2__date-day {
    font-weight: 700;
    letter-spacing: 0.03em;
    font-size: 60px;
    line-height: 100%;
}

.homenest__blog-page__item-2__date-month-year {
    font-size: 14px;
}

.homenest__blog-page__item-2__thumbnail {
    display: inline-block;
    max-width: 235px;
}

.homenest__blog-page__item-2__thumbnail img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 5px;
}

.homenest__blog-page__item-2__meta-date {
    display: inline-block;
}

.homenest__blog-page__item-2__meta {
    display: flex;
    justify-content: space-between;
}

.homenest__blog-page__item-2__category {
    color: #7b7b7b;
    font-size: 14px;
}

.homenest__blog-page__item-2__author {
    font-size: 15px;
    text-decoration: none;
    color: #9b9b9b;
}


.homenest__blog-page__widgets {
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.wpcf7.no-js{
	position: sticky;
	top: 120px;
}
.homepage__blog-page__banner img {
    width: 100%;
}

.homenest__blog-page__widgets form {
    border-radius: 24px;
}

.homenest__blog-page__form-title {
    text-align: center;
    color: #fff;
    font-size: 30px;
}

.homenest__blog-page__form-input {
    margin-top: 30px;
}

.homenest__blog-page__form-input > p {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.homenest__blog-page__form-input > p > br {
    display: none;
}

.homenest__blog-page__form-input > p :where(input, select) {
    width: 100%;
    height: 44px;
    padding: 0 16px;
    outline: none;
    border-radius: 16px;
    border: 0;
    font-family: 'HomeNest';
    font-size: 16px;
    -webkit-text-fill-color: #636363;
}

.homenest__blog-page__form-submit-btn {
	margin-top: 30px;
}

.homenest__blog-page__form-submit-btn input {
    width: 100%;
    height: 45px;
    border-radius: 100px;
    border: 1px solid #fff;
    outline: 0;
    background: transparent;
    -webkit-text-fill-color: #fff;
    font-size: 16px;
    font-family: 'HomeNest';
}


@media only screen and (max-width: 768px) {
	section.homenest__blog-page {
    padding: 0px 20px;
}
	.homenest__blog-page__container {
    flex-direction: column;
}
	.homenest__blog-page__container > * {
		width: 100%;
	}
	
	.popup-form input,
	.popup-form select {
		padding: 10px;
		font-size: 14px;
	}.popup-button {
		padding: 12px;
		font-size: 16px;
	}.popup-form {
		width: calc(100% - 30px);
		margin: 0 15px;
		position: relative;
		right: 0;
	}

	.popup-form.promo {
		margin-bottom: 20px;
		position: relative;
		top: 0;
	}

	.popup-form.seo {
		padding: 0;
	}
	.promo-button {
		font-size: 14px;
		padding: 12px 20px;
	}
	.popup-form {
		width: 100%;
		margin: 0;
	}
}



@media only screen and (max-width: 480px) {
	.homenest__blog-page__blog-grid {
    --col-gap: 20px;
    --row-gap: 20px;
}
	.homenest__blog-page__item-1__content {
    padding: 20px 20px;
    gap: 8px;
}
	.homenest__blog-page__item-1__title, .homenest__blog-page__item-2__title {
    font-size: 20px;
}
	.homenest__blog-page__item-1__meta {
    display: none;
}
	.homenest__blog-page__item-1 {
    border-radius: 8px;
}
	.homenest__blog-page__item-1:not(:first-of-type) {
    width: 100%;
}
	
	
}