body{
    background-color: rgb(56, 56, 56);
    color: white;
    font-size: 1.6rem;
    padding: 0px 0px;
    margin: 0px 0px;
    
}
#head{
    min-height: 0vw;
}
section{
    min-height: 80vh;
}
#div-head{
    width: 100vw;
    background-color: black;
    height: 4.7vw;
    text-align: right;
    position: fixed;
    top: 0;          /* đảm bảo dính sát đỉnh */
    left: 0;         /* sát trái */
    z-index: 9999;
}
.item-head{
    font-size: 1.5rem;
    display: inline-block;
    margin: 0px 0px;
    padding: 2%;
    margin-left: 20px;
    color: rgb(0, 173, 0);
    position: relative;          
    display: inline-block;
    text-decoration: none;       
    padding-bottom: 6px;         
    transition: color 0.3s ease;

}
.item-head:hover{
    animation: col-change 1.5s ease forwards;
}
@keyframes col-change {
    0%{
        color: rgb(0, 173, 0);
        background-color: rgb(0, 29, 143);
        color: rgb(254, 0, 0);
    }
    100%{
        background-color: rgb(0, 29, 143);
        color: rgb(254, 0, 0);
        color: rgb(0, 173, 0);
    }
}
.reveal {
    opacity: 0;
    transform: translateY(50px); /* dịch xuống 50px ban đầu */
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {  /* class sẽ được JS thêm khi vào view */
    opacity: 1;
    scale: 1;
    transform: translateY(0);
    animation: demo 0.8s ease forwards;
}
@keyframes demo {
    0%{
        scale: 0.8;
    }
    100%{
        scale: 1;
    }
}
.item-head::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;                 /* độ dày đường kẻ */
    bottom: 0;
    left: 0;
    background-color: rgb(254, 0, 0); /* màu đỏ giống animation cũ */
    transition: width 0.4s ease; /* tốc độ chạy */
    transform-origin: left;      /* chạy từ trái */
}

.item-head:hover::after {
    width: 100%;                 /* mở rộng full khi hover */
}

/* Optional: khi hover thì chữ đổi màu nhẹ (bạn có thể giữ hoặc bỏ) */
.item-head:hover {
    color: rgb(254, 0, 0);       /* đỏ khi hover */
}
/* secction home */

#title{
    margin-top: 5vw;
    width: 100vw;
    display: flex;
    height:50vh;
    /* position: relative; */
    background-image: url("https://cdn.hstatic.net/files/200000722513/file/gearvn-laptop-gaming-t11-header-pcs.png"); 
    background-position: right;
    background-size: cover;
    overflow: hidden;
    animation:opa 2s ease-in forwards;
}
@keyframes opa {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
#title p{
    margin-top: 15vw;
    font-size: 8rem;
    animation: rtol 2s ease-in forwards;
}
.tt1{
    animation: line_run 10s ease-in infinite;
}
@keyframes line_run {
    0%{
        transform: translateY(-200);
    }
    100%{
        transform: translateY(200);
    }
}
@keyframes rtol {
    0%{
        transform: translateY(-200);
    }
    100%{
        transform: translateY(0);
    }
}
/* produce */

#table-produce{
    padding: 1vw;
}
.produc-item{
    list-style-type: none;
    text-decoration: none;
    overflow: hidden;
    display: inline-block;
    width:23vw;
    height: 50vh;
    background-color: black;
    border-radius: 10%;
    margin-bottom: 4%;
    font-size: 2.5rem;
    color: aliceblue;
    font-weight: 900;
    animation: item_out 1s ease forwards;

}
.produc-item:hover{
    animation: item 1s ease forwards;
}
@keyframes item_out {
    0%{
        scale: 1.2;
    }
    100%{
        scale: 1;
    }
}
@keyframes item {
    0%{
        scale: 1;
    }
    100%{
        scale: 1.2;
    }
}
.produc-item img{
    width:23vw;
    height: 30vh;
}
/* chara */

#chara{

    background-color: rgb(52, 51, 52);
}
.sec{
    display: flexbox;
    margin-bottom: 20px;
}
.text{
    display: inline-block;
    width: 50vw;
}
.img{
    display: inline-block;
    width: 45vw;

}
.img img{
    border-radius: 10%;
    width: 50vw;

}
#text2{
    display: flex;
    float: right;
}


/* ================================================
   RESPONSIVE CSS - Thêm vào cuối file style.css
   ================================================ */

/* Mobile nhỏ (≤ 576px) - Điện thoại dọc */
@media (max-width: 576px) {
    body {
        font-size: 1.3rem; /* Giảm font cho dễ đọc trên mobile */
    }

    #div-head {
        height: auto; /* Không cố định chiều cao */
        padding: 10px 0;
        text-align: center; /* Căn giữa trên mobile */
        flex-wrap: wrap; /* Cho phép xuống dòng nếu quá nhiều item */
        justify-content: center;
    }

    .item-head {
        font-size: 1.1rem;
        margin: 8px 12px;
        padding: 8px 12px;
    }

    #title {
        height: 60vh;
        background-position: center;
        background-size: cover;
    }

    #title p {
        font-size: 5rem;
        margin-top: 20vh;
        line-height: 1.1;
    }

    #table-produce {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
    }

    .produc-item {
        width: 90vw;          /* Gần full width trên mobile */
        height: auto;
        margin: 15px 0;
        border-radius: 15px;
    }

    .produc-item img {
        width: 100%;
        height: auto;
        border-radius: 15px 15px 0 0;
    }

    .produc-item center p {
        padding: 15px;
        margin: 0;
        font-size: 1.8rem;
    }

    .sec {
        flex-direction: column; /* Xếp dọc text và ảnh */
        align-items: center;
    }

    .text, .img {
        width: 90vw;
        margin: 15px 0;
    }

    .img img {
        width: 100%;
        border-radius: 15px;
    }

    #text2 {
        float: none;
        text-align: center;
    }

    h1 {
        font-size: 2.2rem;
        margin: 30px 0 15px;
    }
}

/* Tablet (577px – 991px) */
@media (min-width: 577px) and (max-width: 991px) {
    body {
        font-size: 1.5rem;
    }

    #div-head {
        height: auto;
        padding: 15px 0;
        justify-content: center;
    }

    .item-head {
        font-size: 1.4rem;
        margin: 10px 20px;
    }

    #title p {
        font-size: 7rem;
        margin-top: 18vh;
    }

    #table-produce {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 cột trên tablet */
        gap: 20px;
        padding: 20px;
    }

    .produc-item {
        width: 100%;
        height: auto;
    }

    .produc-item img {
        width: 100%;
        height: auto;
    }

    .sec {
        flex-direction: column;
        align-items: center;
    }

    .text, .img {
        width: 80vw;
    }
}

/* Desktop lớn (≥ 992px) - Giữ nguyên style gốc của bạn, chỉ tinh chỉnh nhẹ */
@media (min-width: 992px) {
    #table-produce {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }

    .produc-item {
        width: 23vw;
        margin: 0 10px 30px;
    }

    .sec {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 5vw;
        margin: 40px 0;
    }

    .text {
        width: 45%;
        padding-right: 30px;
    }

    .img {
        width: 50%;
    }

    .img img {
        width: 100%;
    }

    #text2 {
        float: right;
    }
}

/* Fix chung cho tất cả màn hình */
@media (max-width: 1200px) {
    #div-head {
        position: fixed;
        top: 0;
        z-index: 9999;
        width: 100%;
    }

    section {
        padding-top: 90px; /* Tránh nội dung bị header che (vì header fixed) */
    }
}