/*
 Theme Name: SQS 18
 Theme URI: https://sqs18.vn
 Description: Công ty cổ phần thương mại và xây dựng SQS 18
 Author: Pham Huu Thanh
 Author URI: https://phamhuuthanh.com
 Template: twentytwentyfive
 Version: 1.0.0
 Text Domain: sqs18
*/

/* Import the parent theme's stylesheet. */
@import url("../twentytwentyfive/style.css");

/* =======================================
   Custom Fonts (SVN-Avo)
   ======================================= */
@font-face {
    font-family: 'SVN-Avo'; /* Tên font bạn muốn sử dụng trong CSS */
    src: url('./fonts/SVN-Avo.ttf') format('truetype');
    font-weight: normal; /* Trọng lượng font cho SVN-Avo.ttf */
    font-style: normal;
}

@font-face {
    font-family: 'SVN-Avo';
    src: url('./fonts/SVN-Avo bold.ttf') format('truetype');
    font-weight: bold; /* Trọng lượng font cho SVN-Avo bold.ttf */
    font-style: normal;
}

@font-face {
    font-family: 'SVN-Avo';
    src: url('./fonts/SVN-Avo italic.ttf') format('truetype');
    font-weight: normal; /* Trọng lượng font cho SVN-Avo italic.ttf */
    font-style: italic;
}

@font-face {
    font-family: 'SVN-Avo';
    src: url('./fonts/SVN-Avo bold italic.ttf') format('truetype');
    font-weight: bold; /* Trọng lượng font cho SVN-Avo bold italic.ttf */
    font-style: italic;
}

/* Your custom CSS goes below this line */
body {
    font-family: 'SVN-Avo', Roboto, sans-serif; /* SVN-Avo là ưu tiên, nếu không có sẽ dùng Roboto, sau đó là font sans-serif mặc định */
    color: var(--text-color);
}
.entry-content, .related-post-content{
	text-align:justify;
}
.wp-block-latest-posts__post-title{
	font-weight:800;
}


@media (max-width: 767px) { /* Áp dụng cho màn hình nhỏ hơn hoặc bằng 767px (điện thoại) */
    .hide-on-mobile {
        display: none !important; /* Ẩn block */
    }
	.wp-block-search .wp-block-search__input{
		padding-right:0;
		padding-left:10px;
	}
	.wp-block-search__button{
		padding: 10px;
		width:40px;
		height:40px;
	}
}
@media (max-width: 1024px) { /* Áp dụng cho màn hình nhỏ hơn hoặc bằng 1024px (tablet và mobile) */
    .hide-on-tablet-mobile {
        display: none !important;
    }
}
@media (max-width: 767px), (min-width: 1025px) { /* Ẩn trên mobile và màn hình lớn hơn tablet */
    .show-only-desktop {
        display: none !important;
    }
}
/* Hoặc đơn giản hơn: */
@media (max-width: 1024px) { /* Ẩn trên mobile và tablet */
    .show-only-desktop {
        display: none !important;
    }
}
@media (min-width: 768px) { /* Ẩn trên tablet và desktop */
    .show-only-mobile {
        display: none !important;
    }
}

.wp-site-blocks{
	padding:0;
}

.header-pht{
    background-color: #bb0000;
    color: #fff;
    position: sticky;
    top:0;
    z-index: 99;
}
.header-pht img{
    background-color:white;
    border-radius: 5px;
}
.can-chinh-bia p{
text-align: justify;
}
.can-chinh-bia img{
    object-fit: scale-down !important;
}

h1.custom-title-pht, h2.custom-title-pht, p.custom-title-pht{
-webkit-clip-path: polygon(0% 0%,100% 0%,92% 100%,8% 100%);
	text-transform: uppercase;
}

/* Đảm bảo header chính không cắt */
header.wp-block-template-part.site-header {
    overflow: visible !important;  
}

/* Đảm bảo phần tử bọc bên trong header cũng không cắt */
.wp-block-group.header-wrapper {
    overflow: visible !important;  
}

/* Đảm bảo các menu item cha có vị trí tương đối cho submenu */
nav.primary-navigation ul li.menu-item-has-children {
    position: relative;  
}

/* Cài đặt hiệu ứng trượt xuống và ẩn ban đầu cho submenu */
nav.primary-navigation ul.sub-menu {
    z-index: 9999 !important;
    visibility: hidden; /* Ẩn menu con ban đầu */
    opacity: 0; /* Làm cho menu con trong suốt */
    max-height: 0; /* Chiều cao ban đầu bằng 0 */
    overflow: hidden; /* Ẩn phần bị tràn ra ngoài để max-height hoạt động */
    transform: translateY(-10px); /* Dịch chuyển lên một chút */
    transition: all 0.5s ease-in-out; /* Tạo hiệu ứng chuyển động trong 0.5 giây */
}

/* Hiển thị menu con khi rê chuột vào menu cha */
nav.primary-navigation ul li:hover > ul.sub-menu {
    visibility: visible; /* Hiển thị menu con */
    opacity: 1; /* Làm cho menu con hiện rõ */
    max-height: 500px; /* Chiều cao tối đa, đảm bảo hiển thị hết nội dung */
    transform: translateY(0); /* Đưa menu con về vị trí ban đầu */
}

/* Căn lại submenu */
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container{
	padding: 10px;
	border-radius: 0 30px 0 30px;
}

/* Style mặc định của header */
.header-pht {
    transition: all 0.3s ease-in-out;
    z-index: 1000;
   /* background-color: var(--background-color, #ffffff);*/
}

/* Style khi header đã "sticky" */
.header-pht.is-sticky {
    position: fixed; /* Đây là thuộc tính chính sẽ làm nó bám dính */
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	
    /* Nếu muốn header mờ khi sticky, bạn có thể thêm: */
    /* backdrop-filter: blur(5px); */
    /* background-color: rgba(255, 255, 255, 0.95); */
}

/* Hiệu ứng zoom ảnh bìa khi di chuột qua */
.wp-block-cover {
    overflow: hidden;
}

.wp-block-cover__image-background {
    transition: transform 0.4s ease-in-out;
}

.wp-block-cover:hover .wp-block-cover__image-background {
    transform: scale(1.1);
}

/* ========================================================================= */
/* CSS TẠO HIỆU ỨNG CHO ẢNH ĐẠI DIỆN BÀI VIẾT */
/* ========================================================================= */

/* Đặt thuộc tính overflow:hidden để ảnh không bị tràn ra ngoài khi zoom */
.wp-block-post-featured-image, .wp-block-latest-posts__featured-image {
    overflow: hidden;
    position: relative; /* Quan trọng để đường viền hoạt động chính xác */
}

/* Áp dụng hiệu ứng chuyển đổi cho ảnh để zoom mượt mà */
.wp-block-post-featured-image img {
    transition: transform 0.4s ease-in-out;
}
.wp-block-latest-posts__featured-image img {
    transition: transform 0.4s ease-in-out;
}


/* TẠO HIỆU ỨNG ZOOM VÀ KHUNG VIỀN KHI DI CHUỘT VÀO KHỐI ẢNH */
.wp-block-post-featured-image:hover img {
    transform: scale(1.1); /* Phóng to ảnh 10% */
}
.wp-block-latest-posts__featured-image:hover img {
    transform: scale(1.2); /* Phóng to ảnh 10% */
}

/* TẠO KHUNG VIỀN VÀNG */
.wp-block-post-featured-image:hover {
    box-shadow: 0 0 0 5px #ffcc00; /* Khung viền vàng 5px */
    transition: box-shadow 0.4s ease-in-out;
}
.wp-block-latest-posts__featured-image:hover {
    box-shadow: 0 0 0 5px #ffcc00; /* Khung viền vàng 5px */
    transition: box-shadow 0.4s ease-in-out;
}


/* Responsive adjustments (optional, but recommended) */
@media (max-width: 768px) {
    .custom-section-title .wp-block-heading {
        font-size: 1.8em;
        padding: 8px 20px;
    }
	.related-post-item {
        flex-direction: column; /* Đổi hướng hiển thị sang dạng cột */
        align-items: flex-start; /* Căn lề trái cho các phần tử */
    }

    .related-post-thumbnail {
        margin-right: 0; /* Xóa margin bên phải */
        margin-bottom: 10px; /* Thêm margin dưới để tạo khoảng cách với nội dung */
        width: 100%; /* Buộc ảnh mở rộng hết chiều rộng màn hình */
    }

    .related-post-thumbnail img {
        width: 100%; /* Đảm bảo ảnh chiếm 100% chiều rộng của container */
        height: auto;
    }
	
}

@media (max-width: 480px) {
    .custom-section-title .wp-block-heading {
        font-size: 1.5em;
        padding: 5px 15px;
        transform: skewX(-10deg); /* Giảm độ nghiêng trên mobile nếu cần */
    }
    .custom-section-title {
        margin-bottom: 50px;
    }
}
/* Mở rộng kích thước dearflip book */
.flipbook-full-width .df-container {
    max-width: 100vw !important; /* Chiếm toàn bộ chiều rộng viewport */
    width: 100% !important;
}

.flipbook-full-width .df-container iframe {
    max-width: 100% !important;
}