body{

margin:0;

font-family:
Arial;

}

.header{

background:black;

padding:20px;

}

.container{

display:flex;

justify-content:
space-between;

}

.logo{

display:flex;

gap:10px;

color:white;

text-decoration:none;

}

.logo img{

width:40px;

}

nav{

display:flex;

gap:30px;

}

nav a{

color:white;

text-decoration:none;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:
Arial;

}

body{

background:#111;

}

header{

position:absolute;

top:0;

left:0;

width:100%;

z-index:10;

}

.container{

max-width:1500px;

margin:auto;

display:flex;

justify-content:
space-between;

align-items:center;

padding:

30px 80px;

}

.logo{

display:flex;

align-items:center;

gap:20px;

color:white;

font-size:26px;

font-weight:800;

}

.logo img{

width:60px;

height:60px;

}

.logo span{

color:#f2b233;

}

nav{

display:flex;

gap:50px;

}

nav a{

color:white;

text-decoration:none;

font-size:20px;

}

.hero{

height:100vh;

background:

linear-gradient(

rgba(0,0,0,.45),

rgba(0,0,0,.45)

),

url("../photos/hero.jpg");

background-size:cover;

background-position:center;

}

.hero-wrap{
    min-height:100vh;
    max-width:1500px;
    width:90vw;
    margin:0 auto;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;

    padding:120px 0 0;
}

.left{
    color:white;
    flex:1;
    max-width:720px;
    margin-left:0;
    padding-top:0;
    transform: translateY(-60px);
}


.sub{

letter-spacing:5px;

font-size:15px;

font-weight:500;

margin-bottom:28px;
transform: translateX(20px);

}

.left h1 {
    font-size: 105px;
    line-height: 1.05;
    font-weight: 800;
    margin: 25px 0;
    
    /* CÁCH 1: Tăng độ giãn ngang (Tăng giá trị scaleX để chữ bè ra) */
    transform: scaleX(1.1) scaleY(1.2); 
    
    transform-origin: left;
    
    /* CÁCH 2: Tăng khoảng cách giữa các chữ cái */
    letter-spacing: 4px; 
    
    text-transform: uppercase; /* Đảm bảo chữ luôn viết hoa */
}

.left p{

font-size:18px;

margin-bottom:30px;

line-height:1.6;

}

.left button{

background:#f0c548;

color:#111;

padding:

18px 42px;

border:none;

font-size:18px;

font-weight:700;

cursor:pointer;

border-radius:4px;

transition:.25s;

}

.search-box {
    width:min(420px,100%);
    flex-shrink:0;
    transform:none;
    padding: 42px;
    transform: translate(-40px,-60px);
    
    /* CẢI TIẾN: Nền kính với Gradient để tạo chiều sâu */
    background: linear-gradient(
        135deg, 
        rgba(255, 255, 255, 0.1), 
        rgba(255, 255, 255, 0.05)
    );
    
    /* Hiệu ứng kính mờ đặc trưng */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* Thêm viền trắng mờ để tạo cảm giác "cạnh kính" */
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    /* Bóng đổ sâu hơn */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    
    /* Bo góc Liquid của bạn */
    border-radius: 30px 30px 30px 30px;
    
    display: flex;
    flex-direction: column;
    gap: 20px;
    
    transition: all 0.4s ease;
}

/* Thêm một lớp sáng ở cạnh để trông sắc nét hơn */
.search-box::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 30px 30px 30px 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.search-box h3{

color:white;

font-size:20px;

font-weight:700;

letter-spacing:1px;

margin-bottom:10px;

line-height:1;

}

.search-box input{

width:100%;

height:56px;

padding:0 28px;

background:white;

border:none;

outline:none;

font-size:16px;

border-radius:0;

}
.search-box button{

width:100%;

height:62px;

background:#f0c548;

color:#111;

border:none;

border-radius:12px;

font-size:18px;

font-weight:700;

cursor:pointer;

transition:.2s;

}

.search-box button:hover{

background:#ffd862;

}

/* ===== LOGO + TÊN ===== */
/* ===== LOGO ===== */

.brand{

display:flex;

align-items:center;

gap:20px;

padding-left:70px;

z-index:100;

transform:translateX(-20px);
}

.brand img{

width:56px;

height:56px;

object-fit:contain;

border-radius:10px;
}

.brand-text{

font-size:20px;

font-weight:700;
}

.brand-text .white{

color:#fff;
}

.brand-text .gold{

color:#e6c55a;
}

.brand img{
    width: 56px;
    height: 56px;

    object-fit: contain;

    border-radius: 8px;
}

/* AURORA */
.brand span{
    color: #ffffff !important;

    font-size: 20px;

    font-weight: 600;

    letter-spacing: -0.3px;
}

/* PES PC */
.brand span b{
    color: #e8c45b !important;

    font-weight: 600;
}

.brand-text{
    font-size: 22px;

    font-weight: 600;
}

.brand-text .white{
    color: #ffffff !important;
}

.brand-text .gold{
    color: #e6c55a !important;
}

/* ===== TOP MENU ===== */

/* ===== TOP MENU ===== */

.top-menu{
    position:absolute;
    top:42px;
    right:-35px;
    z-index:999;
}

.top-menu > ul{
    display:flex;

    align-items:center;

    gap:42px;

    list-style:none;

    margin:0;

    padding:0;
}

.top-menu li{
    position:relative;

    list-style:none;
}

.dropdown{
    position:relative;
}

.dropdown::after{
    content:"";

    position:absolute;

    left:0;

    top:100%;

    width:100%;

    height:20px;
}

.top-menu a{
    color:#fff;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    display:block;
}


/* ===== DROPDOWN ===== */

/* MENU XỔ XUỐNG */
/* MENU XỔ XUỐNG */
.submenu{
    position:absolute;

    top:100%;
    left:50%;

    transform:
    translateX(-50%)
    translateY(10px);

    min-width: 100px; 

    /* QUAN TRỌNG */
    opacity:0;
    visibility:hidden;

    background:rgba(10,10,10,.45);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    box-shadow:
    0 10px 35px rgba(0,0,0,.35);

    overflow:hidden;

    transition:.25s;

    z-index:9999;
}

/* CHỈ hiện khi hover */
.dropdown:hover .submenu{
    opacity:1;

    visibility:visible;

    transform:
    translateX(-50%)
    translateY(0);
}

/* item bên trong */
.submenu li{
    background: transparent;
}

.submenu li a{
    display:block;

    padding:14px 30px;

    color:white;

    white-space: nowrap; /* KHÔNG xuống dòng */
}

/* hover */
.submenu li:hover{
    background: rgba(255,255,255,.06);
}

.submenu li a:hover{
    color: #e5b058;
}

.small{
    min-width:180px;
}

/* ===== GIỚI THIỆU ===== */

#about-panel{

opacity:0;

visibility:hidden;

transition:
opacity .45s ease,
transform .45s ease;

transform:
translate(-50%,-46%);

position:absolute;

top:50%;

top:110px;

left:50%;

transform:translateX(-50%);

width:900px;

max-height:80vh;

overflow-y:auto;

max-width:90%;

padding:55px 60px;

color:#fff;

background:rgba(18,18,18,.22);

backdrop-filter:blur(22px);

-webkit-backdrop-filter:blur(22px);

border:1px solid rgba(255,255,255,.12);

border-radius:32px;

box-shadow:0 10px 40px rgba(0,0,0,.35);

z-index:500;

text-align:center;
}

#about-panel.show{

opacity:1;

visibility:visible;

transform:translateX(-50%);
}

#about-panel h1{

font-size:30px;

color:#e5a13f;

margin-bottom:28px;

font-weight:700;
}

#about-panel img{

width:150px;

border-radius:10px;

margin:28px auto;

display:block;
}

#about-panel p{

font-size:18px;

line-height:2;

margin-bottom:28px;

text-align:left;

color:#f1f1f1;
}

#about-panel h3{

margin-top:40px;

font-size:24px;

color:#f0c548;
}

#about-panel h2{

margin-top:24px;

font-size:24px;

color:white;
}

#close-about{

margin-top:36px;

padding:18px 44px;

background:#f0c548;

color:#111;

border:none;

border-radius:14px;

font-size:18px;

font-weight:700;

cursor:pointer;

transition:.25s;
}

#close-about:hover{

background:#ffd862;
}

#home-content{

opacity:1;

transition:
opacity .45s ease;
}

#home-content.hide{

opacity:0;

pointer-events:none;
}

.topbar{

position:absolute;

top:0;

left:0;

width:100%;

padding:30px 80px;

display:flex;

justify-content:space-between;

align-items:center;

z-index:3000;
}

html{
    scroll-behavior: smooth;
}

/* HERO NHỎ */

.hero-mini{

height:230px;

background:

linear-gradient(
rgba(0,0,0,.45),
rgba(0,0,0,.45)
),

url("../photos/hero.jpg");

background-size:cover;

background-position:center;

}


/* DANH SÁCH */

.post-grid{

max-width:1400px;

margin:60px auto;

padding:0 40px;

display:flex;

flex-direction:column;

gap:30px;

}


.post-card{

display:flex;

gap:30px;

background:#fff;

padding:20px;

border-radius:20px;

text-decoration:none;

box-shadow:
0 8px 24px rgba(0,0,0,.08);

}


.post-card img{

width:420px;

height:240px;

object-fit:cover;

border-radius:14px;

}


.post-card-text{

display:flex;

flex-direction:column;

justify-content:center;

}


.post-card h3{

font-size:42px;

color:#222;

margin-bottom:20px;

}


.post-card p{

font-size:18px;

color:#666;

}

/* ===== BÀI ĐĂNG MỚI CUỐI TRANG CHỦ ===== */

.home-newposts{

background:#f5f5f5;

/* giảm khoảng trắng trên dưới */
padding:35px 0 40px;

text-align:center;

}

.home-newposts h2{
margin-bottom:4px;
}

.home-newposts > p{
margin-bottom:30px;
}

.home-post-grid{

width:1500px;

max-width:92%;

margin:auto;

display:grid;

grid-template-columns:repeat(4,1fr);

gap:35px;

}

.home-post-item{

background:#fff;

/* THÊM KHUNG */
border:1.5px solid #e3e3e3;

border-radius:20px;

overflow:hidden;

/* giảm bóng cho giống mẫu */
box-shadow:
0 4px 18px rgba(0,0,0,.04);

transition:.35s;

}

.home-post-item:hover{

transform:translateY(-5px);

border-color:#e5c45b;

box-shadow:
0 10px 24px rgba(0,0,0,.08);

}

.home-post-item img{

width:100%;

height:200px;   /* trước 250 */

object-fit:cover;

}

.home-post-info{

padding:22px;

}

.home-post-type{

display:inline-block;

padding:6px 14px;

border-radius:999px;

background:#e5c45b;

font-size:12px;

font-weight:700;

margin-bottom:14px;

}

.home-post-info h3{

font-size:20px;

margin-bottom:10px;

}

.home-post-info p{

font-size:15px;

line-height:1.5;

}

.home-post-item > a{

display:block;

text-decoration:none;

color:#222;

background:#fff;

}

.extra-posts{
display:none;

margin-top:30px;

animation:fadeIn .4s;
}

.extra-posts.show{
display:grid;
}

@keyframes fadeIn{
from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:none;
}
}

.home-more{

margin-top:35px;

display:flex;

justify-content:center;

}

#show-more-posts{

padding:16px 42px;

border:none;

border-radius:12px;

background:#e5c45b;

color:#111;

font-size:16px;

font-weight:700;

cursor:pointer;

transition:.3s;

}

#show-more-posts:hover{

transform:translateY(-3px);

background:#f0cf67;

}

.home-copyright{

margin-top:10px;

padding:10px 0 10px 200px;

font-size:16px;

color:#7d7d7d;

text-align:left;

}

#searchResults{
    margin-top:15px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

#searchResults a,
#searchResults p{
    display:block;
    padding:12px 16px;
    background:white;
    color:#111;
    text-decoration:none;
    border-radius:10px;
    font-size:15px;
    font-weight:600;
}

#searchResults a:hover{
    background:#f0c548;
}

#pagination{
    display:flex;
    justify-content:center;
    gap:10px;
    margin:50px 0;
}

#pagination button{
    width:42px;
    height:42px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    background:#eee;
    font-weight:700;
}

#pagination button:hover{
    background:#ffd54f;
}

.active-page{
    background:#f4c542 !important;
    color:#000;
}

.home-more{
    display:flex;
    justify-content:center;
    gap:12px;
}

.home-more button{

    background:#f3c84b;

    border:none;

    border-radius:12px;

    padding:14px 30px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;
}

.home-more button:hover{

    transform:translateY(-2px);

}

.hero-wrap .left{

    animation:slideLeft .8s ease forwards;

}

.search-box{

    animation:slideRight .8s ease forwards;

}

@keyframes slideLeft{

from{

opacity:0;
transform:translateX(-50px);

}

to{

opacity:1;
transform:translateX(0);

}

}

@keyframes slideRight{

from{

opacity:0;
transform:translateX(50px);

}

to{

opacity:1;
transform:translateX(0);

}

}

.home-post-item{

opacity:0;

transform:translateY(30px);

animation:showCard .6s ease forwards;

}

@keyframes showCard{

to{

opacity:1;

transform:translateY(0);

}

}

.home-post-item{

transition:.35s;

}

.home-post-item:hover{

transform:translateY(-12px);

box-shadow:0 18px 45px rgba(0,0,0,.2);

}

.home-post-item img{

transition:.5s;

}

.home-post-item:hover img{

transform:scale(1.08);

}

.search-box input:focus{

transform:scale(1.02);

box-shadow:0 0 20px rgba(255,208,0,.4);

}

@media(max-width:1250px){
    .hero-wrap{
        width:92vw;
        gap:40px;
    }

    .left h1{
        font-size:clamp(70px,7vw,105px);
    transform:none;
    }

    .search-box{
        width:380px;
    }
}

@media(max-width:950px){
    .hero-wrap{
        flex-direction:column;
        justify-content:center;
        align-items:flex-start;
        gap:35px;
        padding-top:120px;
    }

    .left{
        max-width:100%;
    }

    .search-box{
        width:100%;
        max-width:420px;
    }
}