* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Quicksand, sans-serif;
}
.fnt-sz_14{
    font-size: 14px;
}
#header{
    width: 100%;
    height:100px;
    position: fixed;
    left: 0px;
    right: 0px;
    background-color: white;
    z-index: 10000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}
#header-head{
    width: 100%;
    height: 25px;
    background-color: #000;
}
#header-hotline{
    width: 80%;
    height: 100%;
    margin: auto;
    color: #fff;
    line-height: 25px;
    font-size: 11px;
    word-spacing: 1px;
}
#header-hotline span b{
    text-transform: uppercase;
}
#header-body{
    width: 100%;
    height: 75px;

}
#header-body_left{
    width: 20%;
    height: 75px;
    float: left;
    position: relative;
    left: 140px;
    text-align: center;
}
#header-body_left img{
    height: 60px;
    width: 70%;
    margin-top: 10px;
}
#header-body_center{
    float: left;
    position: relative;
    left: 100px;
    width: 50%;
    height: 75px;   
}
#input-center_header{
    width: 70%;
    height: 40px;
    margin-top: 20px;
    padding-left: 10px;
    font-size: 14px;
    margin-left: 60px;
    outline: none;
    border: 1px solid #ccc;
}
#btn-search_header{
    width: 60px;
    height: 35px;
    margin-left: -68px;
    border: none;
    outline: none;
    cursor: pointer;
    background-color: #f9bb01;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
}
.ti-search{   
    width: 100%;
    height: 100%;
    position: relative;
}
#count-fav{
    width: 15px;
    height: 15px;
    background-color: red;
    color: #fff;
    font-size: 10px;
    border-radius: 50%;
    padding: 2px 5px 0 5px;
    position: absolute;
    top: 40px;
    right: 225px;

}
#header-body_right{
    float: left;
    width: 30%; 
    height: 75px;
}
#login, #favorite{
    width: 50%;
    height: 75px;
    float: left;
}

#login .ti-user, 
#favorite .ti-heart{
    font-size: 25px;
    cursor: pointer;
    float: left;
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 10px;
}
.heart-sp{
    float: left;
    margin-top: 23px;
    
}
.login-sp{
    float: left;
    font-size: 13px;
    margin-top: 15px;
    color: #87729a;
    cursor: pointer;
    margin-right: 5px;
    text-decoration: none;
}
#login-ac{
    float: left;
    font-size: 13px;
    margin-top: 5px;
    color: #2c4385;
    cursor: pointer;
}
.ti-angle-down{
    font-size: 10px;
    margin-left: 1px;
}
#login.logged-in #box-login {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#login.logged-in #login-content {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

#login-content .btn-link-logout {
  border: 0; background: none; cursor: pointer;
  color: #d32f2f; font: inherit; padding: 0;
}

#login.logged-in #login-ac i { display: none; }

/* ===== Account widget (đặt cuối file) ===== */
#login #login-content{ position:relative; }

#login .acc{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  font-size:14px; color:#2d2d2d;
}
#login .acc-left{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 10px; border-radius:999px; transition:background .2s ease; cursor:default;
}
#login .acc-left:hover{ background:rgba(0,0,0,.05); }

#login .acc-avatar{
  width:28px; height:28px; border-radius:50%;
  background:linear-gradient(180deg,#e9eef5,#cfd9e6);
  border:1px solid #d9e1ec; box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
}
#login .acc-text{ display:flex; flex-direction:column; line-height:1.1; }
#login .acc-hi{ font-size:11px; color:#6b7280; }
#login .acc-name{ font-size:13px; color:#111827; }

#login .acc-toggle{
  border:0; outline:none; background:transparent; cursor:pointer;
  padding:4px 6px; border-radius:8px; color:#374151;
}
#login .acc-toggle:hover{ background:rgba(0,0,0,.06); }

#login .acc-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:160px;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:8px;
  box-shadow:0 12px 30px rgba(0,0,0,.12); display:none; z-index:999;
}
#login .acc-menu.open{ display:block; }
#login .acc-menu a{
  display:block; padding:10px 10px; border-radius:8px;
  color:#111827; text-decoration:none; font-size:14px;
}
#login .acc-menu a:hover{ background:#f3f4f6; }

/* Mesage nhỏ dưới nút login header */
#login small.login-msg{ display:block; margin:6px 0 0 0; font-size:12px; }

/* Khi đã đăng nhập: ẩn dropdown login cũ (bạn đã có rule này, giữ nguyên) */
#login.logged-in #box-login { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* Dòng chào gọn hơn khi logged-in (đã có sẵn, giữ nguyên); thêm khoảng cách */
#login.logged-in #login-content { display:flex; align-items:center; gap:8px; white-space:nowrap; }
/* === CĂN LẠI ICON USER SAU KHI ĐĂNG NHẬP === */
#login.logged-in{
  display: flex;           /* xếp ngang icon + nội dung */
  align-items: center;     /* canh giữa theo chiều dọc */
  gap: 8px;
  flex-wrap: nowrap;       /* không cho xuống dòng */
}

/* Icon người: bỏ float, giữ cùng hàng và giữa dòng */
#login.logged-in .ti-user{
  float: none;             /* ghi đè float cũ */

  align-self: center;      /* canh giữa trong flex container */
  vertical-align: middle;
  line-height: 1;
  margin: 0 10px 0 20px;   /* khoảng cách giống layout cũ – chỉnh tuỳ ý */
}

/* Khối nội dung tài khoản đứng sát icon và không xuống dòng */
#login.logged-in #login-content{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;     /* tránh wrap tên dài */
}

/* Widget tài khoản sau khi login */
#login.logged-in #login-content .acc{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
#login.logged-in #login-content .acc-left{
  padding: 4px 8px;        /* gọn để cân với kích thước icon */
}

/* Ẩn dropdown login cũ khi đã đăng nhập (nếu có) */
#login.logged-in #box-login{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Chỉ áp cho trạng thái CHƯA đăng nhập (không có .logged-in) */
#login:not(.logged-in){ position: relative; }

/* Mặc định ẩn hộp dropdown */
#login:not(.logged-in) #box-login{
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;
}

/* Hover vào khu vực #login thì hiện dropdown */
#login:not(.logged-in):hover #box-login{
  display: block;
}
/* Chỉ áp khi CHƯA đăng nhập */
#login:not(.logged-in){ position: relative; }

/* Ẩn mặc định – dùng hover hoặc data-open để hiện */
#login:not(.logged-in) #box-login{
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;
  overflow: visible;
}

/* Hover vào #login hoặc chính box => hiện */
#login:not(.logged-in):hover #box-login,
#login:not(.logged-in) #box-login:hover{
  display: block;
}

/* Nếu mở bằng click (mobile), thêm data-open="1" cũng hiện */
#login:not(.logged-in) #box-login[data-open="1"]{
  display: block;
}

/* Message trong form login lớn – luôn dính vào khối nút */
#box-LG .login-msg-wrap{
  margin-top: 6px;        /* cách nút 1 chút */
}
#box-LG .login-msg{
  display: block;
  font-size: 12px;
  line-height: 1.3;
}
/* Khu vực link Yêu thích (không ảnh hưởng layout cũ) */
#header .favorite-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

/* Icon trái tim */
#header .favorite-link .fav-icon {
  font-size: 18px;          /* chỉnh theo header của bạn */
  line-height: 1;
  vertical-align: middle;
}

/* Badge đếm: bám vào góc icon */
#header .favorite-link .fav-count {
  position: absolute;
  top: -6px;                 /* chỉnh tuỳ header */
  right: -10px;              /* chỉnh tuỳ header */
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
/*================= RESPONSIVE HEADER =================*/
@media (max-width: 1024px) {

  #header {
    height: auto;
  }
  #header-body_right {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  #header-body_left {
    left: 40px;
    width: 25%;
  }

  #favorite #heart-content {
    display: none;
  }
  #header-body_center {
    left: 20px;
    width: 45%;
  }
  .ti-user{
    display: none;
  }
  #input-center_header {
    width: 90%;
    margin-left: 0;
  }

  #header-body_right {
    width: 30%;
  }


  #count-fav {
    position: absolute;
    right: 85px;
  }
}
/* ================= HEADER MOBILE TỐI GIẢN ================= */
@media (max-width: 768px) {
  html,body{
    max-width: 100%;
    overflow-x: hidden;
    width: 100%;
  }
  #header-head { 
    display: none; 
  }

  #header {
    height: auto;
    border-radius: 0;
  }

  /* ===== HEADER 1 HÀNG ===== */
  #header-body {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
  }

  /* reset desktop */
  #header-body_left,
  #header-body_center,
  #header-body_right,
  #login,
  #favorite {
    float: none !important;
    position: static !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
  }

  /* ===== LOGO ===== */
  #header-body_left img {
    width: 70px;
  }

  /* ===== SEARCH Ở GIỮA ===== */
  #header-body_center {
    flex: 1;
    position: relative;
  }

  #input-center_header {
    width: 100%;
    height: 36px;
    padding: 0 38px 0 10px; /* chừa chỗ cho 🔍 */
    font-size: 13px;
    margin-top: -1px;
  }

  /* 🔍 NẰM TRONG INPUT */
  #btn-search_header {
    position: absolute;
    right: 215px;
    top: 30px;
    transform: translateY(-20%);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    padding: 0;
  }

  /* ===== BÊN PHẢI: TIM + TÀI KHOẢN ===== */
  #header-body_right {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* ===== FAVORITE ===== */
  #favorite {
    position: relative;
  }

  #favorite .ti-heart {
    font-size: 20px;
    display: block;
    margin-top: -5px;
  }

  #count-fav {
    position: absolute;
    top: 20px;
    right: 10px;
    font-size: 10px;
  }

  /* ===== LOGIN: CHỈ TÊN ===== */
  #login .ti-user,
  #login .login-sp {
    display: none;
  }

  #login-ac {
    font-size: 12px;
    white-space: nowrap;
  }
}