/* =========================
HEADER + SEARCH
========================= */
.header{
    position:sticky;
    top:0;
    left:0;

    width:100%;

    background:#E30019;

    border-bottom:1px solid rgba(255,255,255,0.1);

    z-index:9999;

    transition:0.3s;
}

.header .container{
    height:74px;
}

.header-wrap{
    height:100%;

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

    gap:20px;
}

.logo img{
    height:42px;
    display:block;
}

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

@media (max-width: 1024px) {
    .header-wrap {
        gap:12px;
    }

    .header-right {
        gap:12px;
    }

    .header-item strong {
        font-size:12px;
    }
}

@media (max-width: 768px) {
    .header .container {
        height:auto;
        padding-top:10px;
        padding-bottom:10px;
    }

    .header-wrap {
        display:grid;
        grid-template-columns:1fr auto;
        align-items:center;
        row-gap:10px;
    }

    .logo {
        grid-column:1 / -1;
        display:flex;
        justify-content:center;
        order:1;
    }

    .logo img {
        height:34px;
    }

    .search-box {
        grid-column:1 / -1;
        order:3;
        width:100%;
        max-width:100%;
    }

    .search-input {
        width:100%;
    }

    .search-input input {
        height:44px;
        border-radius:12px;
        border-width:1px;
        padding:0 46px 0 14px;
        font-size:14px;
        box-shadow:0 6px 18px rgba(215, 0, 24, 0.08);
    }

    .search-btn {
        right:10px;
        width:30px;
        height:30px;
        border-radius:8px;
        background:#f5f5f5;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .search-result {
        top:calc(100% + 10px);
        border-radius:12px;
        box-shadow:0 16px 32px rgba(15, 23, 42, 0.12);
    }

    .search-item {
        padding:10px 8px;
        gap:10px;
    }

    .search-name {
        font-size:12px;
    }

    .search-price {
        font-size:11px;
    }

    .search-oldprice {
        font-size:10px;
    }

    .search-thumb {
        width:48px;
        height:48px;
    }

    .header-right {
        order:2;
        display:flex;
        justify-content:flex-end;
        gap:8px;
    }

    .header-item {
        min-width:72px;
        padding:8px 10px;
        border-radius:8px;
        background:rgba(255,255,255,0.08);
        justify-content:center;
    }

    .header-item small,
    .header-item strong {
        display:block;
    }

    .header-item strong {
        font-size:11px;
        line-height:1.2;
    }

    .header-item small {
        font-size:10px;
        line-height:1.2;
    }

    .header-item svg {
        width:18px;
        height:18px;
    }
}

@media (max-width: 420px) {
    .header-wrap {
        grid-template-columns:1fr;
    }

    .header-right {
        justify-content:space-between;
        width:100%;
    }

    .header-item {
        flex:1;
        gap:6px;
    }

    .header-item strong {
        font-size:10px;
    }

    .search-input input {
        height:42px;
        padding-right:42px;
        font-size:13px;
    }

    .search-result {
        padding:6px;
    }

    .search-item {
        padding:8px 6px;
    }
}

@media (max-width: 1024px) {
    .header-wrap {
        gap:12px;
    }

    .header-right {
        gap:12px;
    }

    .header-item strong {
        font-size:12px;
    }
}

@media (max-width: 768px) {
    .header .container {
        height:auto;
        padding-top:10px;
        padding-bottom:10px;
    }

    .header-wrap {
        flex-wrap:wrap;
        justify-content:center;
    }

    .logo {
        width:100%;
        display:flex;
        justify-content:center;
    }

    .logo img {
        height:34px;
    }

    .search-box {
        order:3;
        width:100%;
        max-width:100%;
    }

    .header-right {
        width:100%;
        justify-content:space-between;
    }

    .header-item {
        flex:1;
        justify-content:center;
    }

    .header-item small,
    .header-item strong {
        display:block;
    }

    .header-item strong {
        font-size:11px;
        line-height:1.2;
    }

    .header-item small {
        font-size:10px;
        line-height:1.2;
    }

    .header-item svg {
        width:18px;
        height:18px;
    }
}

@media (max-width: 420px) {
    .header-right {
        gap:8px;
    }

    .header-item {
        gap:6px;
    }

    .header-item strong {
        font-size:10px;
    }
}

/* Search result dropdown - hidden by default, shown when JS adds .active */
.search-result{
    display:none;
    position:absolute;
    left:0;
    top:calc(100% + 8px);
    width:100%;
    background:#fff;
    border-radius:10px;
    box-shadow:0 14px 32px rgba(0,0,0,0.12);
    padding:8px;
    z-index:9999;
    max-height:420px;
    overflow:auto;
    border:1px solid rgba(17,24,39,0.08);
}
.search-result.active{
    display:block;
}

.search-result::-webkit-scrollbar {
    width:6px;
}

.search-result::-webkit-scrollbar-thumb {
    background:#d9d9d9;
    border-radius:999px;
}

.search-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    text-decoration:none;
    color:#111827;
    padding:10px 8px;
    border-radius:8px;
    transition:0.2s ease;
}

.search-item:hover{
    background:#f5f5f5;
}

.search-info{
    flex:1;
    min-width:0;
}

.search-name{
    font-size:13px;
    line-height:1.35;
    font-weight:600;
    color:#111827;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
}

.search-price-wrap{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-top:4px;
}

.search-price{
    font-size:12px;
    font-weight:700;
    color:#d70018;
}

.search-oldprice{
    font-size:11px;
    color:#7a7a7a;
    text-decoration:line-through;
}

.search-thumb{
    width:52px;
    height:52px;
    border-radius:8px;
    overflow:hidden;
    background:#f8f8f8;
    border:1px solid #efefef;
    flex-shrink:0;
}

.search-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.search-empty{
    padding:12px 10px;
    font-size:13px;
    color:#666;
    text-align:center;
}

.search-input{
    position:relative;
}

.search-input input{
    width:100%;
    height: 40px;
    border:2px solid #d70018;
    border-radius:8px;
    padding:0 50px 0 16px;
    font-size:15px;
    outline:none;
    background:#fff;
    box-shadow:0 2px 6px rgba(215, 0, 24, 0.08);
}

.search-input input:focus{
    border-color:#d70018;
    border-radius:8px;
    box-shadow:0 0 0 4px rgba(215, 0, 24, 0.08);
}

.search-btn{
    position:absolute;
    top:50%;
    right:14px;
    transform:translateY(-50%);
    border:none;
    background:none;
    cursor:pointer;
    color:#111827;
}

.header-right{
    display:flex;
    align-items:center;
    gap:20px;
}

.header-item{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
}

.header-item small{
    display:block;
    color:#fff;
    font-size:12px;
}

.header-item strong{
    color:#fff;
    font-size:14px;
}

.icon{
    color:#fff;
    font-size:20px;
}