/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* =======================
css toàn trang
======================= */
html, body {
    overflow-x: hidden !important;
}
.collection-list a{
	font-family:Ganh;
}
.photo-item h3, .photo-item p{
	font-family:Ganh;
}
/* .hn-footer-email{
    white-space: nowrap !important;
} */
/* =======================
css header
======================= */
.hn-header-home{
	backdrop-filter: blur(0px);
}
 .hn-header-home span.e-n-menu-title-text:hover,  .hn-header-home span.e-n-menu-title-text:active {
    font-weight: 500 !important;
	transition: color 0.3s ease;
}

/* =======================
css header all page
======================= */
.hn-header .elementor-nav-menu > li ul.sm-nowrap {
    display: none; 
}
.hn-header .elementor-nav-menu > li:hover > ul.sm-nowrap{
    display: flex !important; 
}
/* Selector cho mục menu Cấp 2 có chứa submenu (LI cha của UL trong ảnh) */
.hn-header .elementor-nav-menu ul.sm-nowrap > li.menu-item-has-children {
    /* Quan trọng: Đảm bảo LI cha là điểm neo (anchor) */
    position: relative !important; 
    display: block !important; /* Cần thiết nếu LI cha đang nằm trong layout ngang */
}

/* Selector cho Submenu Cấp 3 (UL trong ảnh) */
.hn-header .elementor-nav-menu ul.sm-nowrap ul.sm-nowrap {
    /* 1. Ghi đè các inline style lỗi */
    margin-left: 0 !important;
    margin-top: 0 !important; /* Loại bỏ giá trị âm gây trôi */
    
    /* 2. Thiết lập Vị trí Tuyệt đối */
    position: absolute !important;
    
    /* 3. Đẩy xuống dưới thẻ A/LI cha */
    top: 100% !important; /* Đẩy xuống 100% chiều cao của LI cha */
    left: 0 !important; /* Căn thẳng hàng với cạnh trái của LI cha */

    /* 4. Layout (Hiển thị DỌC/Cột) */
    display: block !important; /* Buộc hiển thị dọc */
    width: 250px !important; /* Đặt chiều rộng cố định */
    min-width: 250px !important;

}
.hn-header .elementor-nav-menu ul.sm-nowrap > li:nth-child(3) { 
    width: 250px !important; 
}
/* 6. Quy tắc hiển thị khi hover (đảm bảo nó ghi đè display:none inline style) */
.hn-header .elementor-nav-menu ul.sm-nowrap > li.menu-item-has-children:hover > ul.sm-nowrap {
    display: block !important;
}


/* =======================
css image background
======================= */
.hn-img-background {
    -webkit-opacity: 0.3 !important;
    opacity: 0.3 !important;	
}


/* =======================
css Trang Dịch Vụ
======================= */
.hn-dv-con-1{
    background-color:  #39393975;
    backdrop-filter: blur(10px);
}
.hn-dv-con-2{
    background-color:  #C1954E66;
    backdrop-filter: blur(10px);
}
.hn-dv-con-3{
	background-color: #66282680;
	backdrop-filter: blur(10px);
}

@media (max-width:1450px){
	.hn-item-dv-thue, .hn-item-dv-photo, .hn-item-dv-makeup{
		min-height:560px !important;
	}
}
@media (max-width:1350px){
	.hn-item-dv-thue, .hn-item-dv-photo, .hn-item-dv-makeup{
		min-height:540px !important;
	}
}

@media (max-width:767px){

	.hn-dv-con-1,.hn-dv-con-2,.hn-dv-con-3{
		position:relative !important;
		width:100%;
	}	
	
	.hn-img-dv{
		position:relative;
		width:100% !important;
	}	
}

/* =======================
css Trang Blog
======================= */
/* ===== Pagination in .hn-blog ===== */
.hn-blog .pagination,
.hn-blog .elementor-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;                 /* khoảng cách giữa các mục */
}

/* Mặc định cho các item */
.hn-blog .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  min-width: 24px;
  height: 24px; 
  text-decoration: none;
}

/* Số đang active: viền tròn mảnh + màu đỏ */
.hn-blog .page-numbers.current {
  border: 1px solid #222;
  border-radius: 999px;
  width: 30px;
  height: 30px;
  font-weight: 500;
 }

/* Chevron trái/phải – ẩn text "Previous"/"Next" và thay bằng ký tự chevron */
.hn-blog .page-numbers.prev,
.hn-blog .page-numbers.next {
  font-size: 0;              /* ẩn chữ */
  width: 36px;
  height: 36px;
  padding: 0;
  color: #222 !important;
  position: relative;
}

.hn-blog .page-numbers.prev::before {
  content: "‹";              /* chevron trái */
  font-size: 32px;
  line-height: 1;
}

.hn-blog .page-numbers.next::before {
  content: "›";              /* chevron phải */
  font-size: 32px;
  line-height: 1;
}

/* Hover nhẹ */
.hn-blog .page-numbers:hover,
.hn-blog .page-numbers.prev:hover::before,
.hn-blog .page-numbers.next:hover::before {
  opacity: .75;
}

/* Khoảng cách tổng thể nếu cần */
.hn-blog .pagination,
.hn-blog .elementor-pagination { margin-top: 20px; }




/* =======================
css gallery 
======================= */
.hn__gallery-row {
  display: flex;
  gap: 20px;               /* khoảng cách giữa hai ảnh */
  justify-content: center; /* căn giữa nếu muốn */
  flex-wrap: wrap;         /* tự xuống dòng trên mobile */
}
.hn__bst-img {
  width: 48%;              /* chia đôi hàng */
  border-radius: 8px;
  object-fit: cover;
  display: block;
}
@media (max-width: 768px) {
  .hn__bst-img {
    width: 100%;           /* 1 ảnh / hàng trên mobile */
  }
}

/* =======================
css form footer
======================= */
/* 1. Đặt lại box-sizing cho form (Quan trọng) */
.wpcf7-form {
    box-sizing: border-box;
    display: flex; 
	flex-direction:column;
    flex-wrap: nowrap; 
    gap: 10px; 
    max-width: 400px; 
}
.wpcf7 form{
	background-color:#000;
	margin:0;
}
input[type=email] {
   	border-radius: 0px;
}
.wpcf7 input[name="your-email"] {
    border: none !important;
	border-radius:none !important;
    border-bottom: 1px solid #fff !important;
   
}	
.wpcf7 input[name="your-email"]:not(:placeholder-shown) {
    /* Chuyển nền thành trắng */
    background: #000 !important;
    /* Chuyển chữ thành đen */
    color: #fff !important; 
    
    /* Đảm bảo viền dưới (nếu có) cũng chuyển màu nếu cần */
    border-bottom: 1px solid #000 !important; 
}

/* ⚠️ Đảm bảo placeholder cũng chuyển màu khi nội dung đã được nhập */
.wpcf7 input[name="your-email"]:not(:placeholder-shown)::placeholder {
    color: #fff !important;
    opacity: 0.5 !important;
}

/* ------------------------------------------------------------------ */
/* ➡️ Nút Submit (Thay đổi màu mũi tên khi có nội dung) */
/* ------------------------------------------------------------------ */

/* *Lưu ý: CSS này chỉ hoạt động nếu nút submit nằm ngay sau input trong DOM. 
   Nếu không, bạn buộc phải dùng JS. */

.wpcf7 input[name="your-email"]:not(:placeholder-shown) + input[type="submit"] {
    /* Ví dụ: Thay mũi tên từ trắng sang đen */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 12' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><line x1='1' y1='6' x2='33' y2='6'/><polyline points='28 1 34 6 28 11'/></svg>") !important;
}
/* 2. Style cho ô nhập liệu Email */
.wpcf7 input[type="email"] {
	padding:0;
}
.wpcf7 input[name="your-email"] {
	width:100%;
	flex-grow: 1; 
	color:#fff;
	background:#000;
	font-family: Kontora, sans-serif;
	font-size: 18px;
	font-weight:500;
	border:none;
	padding-bottom:10px;
	margin:0;
}
.wpcf7 input::placeholder {
    color: #ffffff; 
    opacity: 0.8; 	
}
.wpcf7 input:focus {
    outline: none;
    box-shadow: none;
}

/* 3. Hiệu ứng Focus cho Email */
.wpcf7 input[name="your-email"]:focus {
   
    outline: none;
   
}

/* 4. Style cho nút Submit */
.wpcf7 input[type="submit"] {
	position:absolute;
	z-index:99;
	margin-left:-50px;
	flex-shrink: 0;
    
    /* Thiết lập kích thước nút và padding */
    width: 50px; /* Tăng nhẹ để chứa mũi tên dài hơn */
    height: 40px;
    padding: 0;

    /* Về thẩm mỹ */
    background-color: transparent;
    border: none;
    cursor: pointer;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 12' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><line x1='1' y1='6' x2='33' y2='6'/><polyline points='28 1 34 6 28 11'/></svg>");
  
	
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 80% auto; /* Tăng kích thước để mũi tên dài hiển thị tốt hơn */

    /* Ẩn văn bản Submit */
    text-indent: -9999px;
    color: transparent;
}

/* 5. Hiệu ứng Hover cho nút Submit */
.wpcf7 input[type="submit"]:hover {
    filter: brightness(0.8);
    background-color: transparent !important;
    color: transparent !important;
}


/* 6. Responsive (Quan trọng cho Footer) */
/* Khi màn hình quá nhỏ, buộc Email và Submit xuống dòng */
@media (max-width: 500px) {
	.wpcf7-form {
		flex-wrap: nowrap;
	}
	.wpcf7 input[name="your-email"],
	.wpcf7 input[type="submit"] {
		/*         width: 100%; 
		margin-bottom: 5px;  */
	}
}



/* =======================
css header
======================= */
@media (min-width:1025px){
	.elementor-nav-menu .sub-arrow {
		display:none !important;
	}
	nav > ul > li .sub-menu::before{
		position:absolute;
		content:" ";
		width:100%;
		height:10px;
		top:-10px;
		left:0;
	}
	nav > ul > li ul.sub-menu{
		margin-top:10px !important;
		padding: 0 20px 10px !important;
	}
	nav > ul > li > ul.sub-menu {
		box-shadow: 0 0 10px #000 !important;
	}

	nav > ul > li:hover .sub-menu {
		display: flex !important;
		width: fit-content !important;
		gap:20px;		
		transform: translateX(-40%);
	}

	nav > ul > li:hover .sub-menu a.elementor-sub-item{
		border-bottom:1px solid #DA222D;
		border-left:0px;
		
	}


	nav > ul > li .sub-menu .sub-menu {
		flex-direction: column;
		position: static;
		gap: 5px !important;
		padding-left:0px !important;
		padding-right:0px !important;
		transform: translateX(-5%) !important;
	}
	nav > ul > li .sub-menu .sub-menu a.elementor-sub-item {
		font-size: 16px !important;
		border-bottom:none !important;
		left:10px !important;
		border: 0px !important;
	}

}


/* =======================
css nhật ký
======================= */
.hn-nhat-ky{
	display:none;
}
.hn-nk:hover .hn-nhat-ky{
	display:flex;
	position:absolute;
	justify-content:center;
	align-items:center;
	top:0;
	left:0;
	width:100%;
	height:100%;
}


/* =======================
css comment blog
======================= */
#comments .comment .avatar, #comments .pingback .avatar {
    border-radius: 10px !important;    
}
.comment-author  a, .comment-metadata time,.comment-metadata a{
	font-family:Ganh !important;
	color:#000 !important;
}
span.says {
    display: none !important;
}
.comment-content{
	font-family:Ganh !important;
}