/* ============================================================
   TAROT HUYỀN BÍ — Mobile styles (tách riêng để dễ bảo trì)
   Tất cả CSS responsive cho mobile/tablet nằm ở đây.
   File này load sau style.css nên có độ ưu tiên cao hơn.
   ============================================================ */

@media(max-width:1180px){
  .nav-links a{padding:9px 8px;font-size:.85rem}
  .brand-name{font-size:1.2rem}
}

@media(max-width:1080px){
  .nav-inner{height:64px}
  .nav-links{position:fixed;top:64px;right:0;left:0;flex-direction:column;align-items:stretch;
    background:var(--paper);border-bottom:1px solid var(--line);padding:8px 20px 20px;display:none;
    box-shadow:0 20px 40px rgba(60,45,20,.15);max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;
    gap:2px;animation:slideDown .3s ease}
  @keyframes slideDown{from{opacity:0;transform:translateY(-10px)}}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 12px;border-bottom:1px solid var(--line-soft);font-size:1rem;border-radius:8px}
  .nav-links a.active::after{display:none}
  .nav-cta{margin:14px 0 0;padding:14px 0 0;border-left:none;border-top:1px solid var(--line-soft);
    flex-direction:row;gap:10px;justify-content:center}
  .nav-cta .btn{flex:1;justify-content:center}
  .nav-cta .snd-btn{width:44px;height:44px;flex-shrink:0;border:1px solid var(--line);border-radius:50%}
  .burger{display:inline-flex}
}

@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:48px}.hero{padding:64px 0 52px}}

@media(max-width:700px){.section{padding:56px 0}}

@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}}

@media(max-width:560px){.grid-3,.grid-4{grid-template-columns:1fr}}

@media(max-width:820px){.daily{grid-template-columns:1fr;justify-items:center;text-align:center;padding:36px 24px;gap:36px}}

@media(max-width:820px){.daily-kw{justify-content:center}}

@media(max-width:640px){.modal-grid{grid-template-columns:1fr;gap:24px}.modal-card{max-width:220px;margin:0 auto}.modal{padding:28px 22px}}

@media(max-width:560px){.lib-grid{grid-template-columns:repeat(2,1fr);gap:16px}}

@media(max-width:560px){.lib-card h4{font-size:1.1rem}.lib-card{padding:14px 12px 16px}}

@media(max-width:560px){.lib-excerpt{display:none}}

@media(max-width:700px){.foot-grid{grid-template-columns:1fr}}

@media(max-width:900px){.hero-fan{height:400px;max-width:420px;margin:0 auto}}

@media(max-width:640px){
  .fan-inner{height:320px}
  /* Fix nhãn chồng lấn trên mobile: cho wrap, giới hạn chiều rộng */
  .slot-label{
    font-size:.6rem;
    top:-28px;
    white-space:normal;
    max-width:110px;
    text-align:center;
    line-height:1.35;
    letter-spacing:.05em;
    word-break:break-word;
  }
  .slot-card.full .slot-label{
    white-space:normal;
    max-width:110px;
    text-align:center;
    line-height:1.35;
    font-size:.6rem;
    letter-spacing:.05em;
    word-break:break-word;
  }
}

@media(max-width:640px){
  .modal-bg{padding:12px;align-items:flex-start;padding-top:5vh}
  .modal{padding:24px 18px;border-radius:16px;max-height:90vh;max-height:90dvh;width:100%}
  .modal-grid{grid-template-columns:1fr;gap:20px}
  .modal-card{max-width:180px;width:180px;margin:0 auto;padding:10px;position:relative}
  .modal-card-img{width:100%;aspect-ratio:300/520;overflow:hidden;border-radius:4px;background:#f5f0e6}
  .modal-card-img img,.modal-card-img svg{width:100%;height:100%;object-fit:cover;display:block}
  .modal-card.reversed .modal-card-img img,.modal-card.reversed .modal-card-img svg{transform:rotate(180deg)}
  .modal h2{font-size:1.6rem;line-height:1.25;word-wrap:break-word}
  .modal .tabpane{font-size:.95rem;line-height:1.8}
  .modal .tabpane p{word-wrap:break-word;overflow-wrap:break-word}
  /* tabs scrollable */
  .tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;gap:0;margin:16px -18px 6px;padding:0 18px}
  .tabs::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap;flex-shrink:0;padding:12px 14px;font-size:.9rem;min-height:44px}
  /* keywords wrap */
  .kwrow,.daily-kw{flex-wrap:wrap}
  .kw{font-size:.8rem;padding:5px 12px;white-space:normal;text-align:center}
  .orient{font-size:.8rem;flex-wrap:wrap}
}

@media(max-width:700px){
  /* header gọn hơn */
  .nav{position:sticky;top:0;z-index:100}
  .nav-inner{height:60px;gap:6px;padding:0 10px}
  .brand{display:flex;align-items:center;gap:6px;min-width:0;flex:1}
  .brand-mark{width:32px;height:32px;flex-basis:32px;flex-shrink:0}
  .brand-name{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .burger{width:38px;height:38px;flex-shrink:0}
  .nav-cta{display:flex;align-items:center;gap:6px;flex-shrink:0}
  .nav-cta .btn{padding:8px 12px;font-size:.75rem;white-space:nowrap}
  .snd-btn{width:34px;height:34px;flex-shrink:0}
  /* ẩn nav links trên mobile (dùng burger menu) */
  .nav-links{display:none}

  /* Trên màn hình rất hẹp (<380px): ẩn nút âm thanh để header thoáng */
  @media(max-width:380px){
    .snd-btn{display:none}
    .brand-name{font-size:.88rem}
    .nav-cta .btn{padding:7px 10px;font-size:.72rem}
  }

  /* hero */
  .hero{padding:40px 0 32px}
  .hero h1{font-size:2.1rem;line-height:1.2}
  .hero .lede{font-size:1rem}
  .hero-kicker{font-size:.68rem;padding:6px 14px 6px 12px;margin-bottom:1.2em}
  .hero-ctas{margin-top:1.6em}
  .hero-fan{height:340px}
  .fan-card{width:min(180px,52vw)}

  /* spread cards */
  .spread-card{padding:22px 20px}
  .spread-card h3{font-size:1.2rem}

  /* daily */
  .daily{border-radius:18px}
  .daily-info h3{font-size:1.5rem}

  /* library */
  .lib-tools{padding:16px}
  .search{padding:12px 20px 12px 44px}

  /* footer */
  footer{padding:40px 0 24px;margin-top:56px}
  .foot-grid{gap:24px;margin-bottom:24px}
}

@media(max-width:380px){
  .nav-cta .btn span{display:none}
  .nav-cta .btn::before{content:"Rút bài"}
  .lib-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .modal{padding:20px 14px}
}

@media(max-width:700px){.how-steps{grid-template-columns:1fr}}

@media(max-width:700px){.how-step{border-left:none;border-top:1px solid var(--line)}.how-step:first-child{border-top:none}}

@media(max-width:768px){
  .modal-bg{backdrop-filter:none;-webkit-backdrop-filter:none}
}

@media(max-width:640px){
  .syn-quick,.syn-card,.syn-advice{padding:14px 16px}
  .syn-pos{font-size:.65rem;padding:3px 10px}
}
/* ===== Fix thanh tìm kiếm thư viện trên mobile ===== */
@media(max-width:640px){
  .lib-searchrow{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:16px;
  }
  .lib-searchrow .search{
    width:100%;
    font-size:16px; /* tránh iOS zoom khi focus */
    padding:12px 16px 12px 44px;
  }
  .lib-searchrow .search::placeholder{
    font-size:.85rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .lib-count{
    text-align:center;
    font-size:.85rem;
  }
}

/* ===== Fix menu burger: dropdown góc phải dưới nút burger ===== */
@media(max-width:1080px){
  .nav-links{
    position:fixed;
    top:64px;
    right:12px;
    left:auto;
    width:260px;
    flex-direction:column;
    align-items:stretch;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:8px;
    display:none;
    box-shadow:0 20px 40px rgba(60,45,20,.2);
    max-height:calc(100dvh - 80px);
    overflow-y:auto;
    gap:2px;
    animation:slideDown .25s ease;
    z-index:200;
  }
}

/* ===== Fix header: nút loa không tràn ===== */
@media(max-width:380px){
  .nav-inner{
    gap:4px;
    padding-left:8px;
    padding-right:8px;
  }
  .brand-name{
    font-size:.85rem;
    max-width:110px;
  }
  .nav-cta .btn{
    padding:8px 10px;
    font-size:.7rem;
  }
}

/* ===== Fix nhãn đè lên ảnh ở màn hình kết quả (mobile) - TRIỆT ĐỂ ===== */
@media(max-width:640px){
  /* Nhãn ở màn hình kết quả: đặt dưới lá bài, không cắt từ giữa */
  .slot-card.full .slot-label{
    font-size:.62rem!important;
    top:auto!important;
    bottom:-36px!important;
    max-width:120px!important;
    min-width:80px;
    line-height:1.3!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    text-align:center!important;
    letter-spacing:.04em!important;
    padding:0 4px;
  }
  /* Đảm bảo nhãn ở bước chọn lá cũng không cắt từ */
  .slot-label{
    word-break:normal!important;
    overflow-wrap:break-word!important;
  }
  /* Tăng khoảng cách giữa các lá để nhãn không chồng */
  .stage{
    padding-top:40px!important;
    padding-bottom:48px!important;
  }
}

/* ===== Fix triệt để header mobile ===== */
@media(max-width:480px){
  .nav-inner{
    height:58px;
    gap:6px;
    padding:0 10px;
  }
  .brand{
    gap:6px;
    min-width:0;
  }
  .brand-mark{
    width:30px;
    height:30px;
    flex-shrink:0;
  }
  .brand-name{
    font-size:.88rem;
    max-width:105px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .burger{
    width:36px;
    height:36px;
    flex-shrink:0;
    padding:0;
  }
  .snd-btn{
    width:34px;
    height:34px;
    flex-shrink:0;
  }
  .nav-cta{
    flex-shrink:0;
    margin-left:2px;
  }
  .nav-cta .btn{
    padding:9px 12px;
    font-size:.72rem;
    border-radius:999px;
  }
}
/* Màn hình rất nhỏ: ẩn nút loa */
@media(max-width:360px){
  .snd-btn{display:none!important}
  .brand-name{max-width:130px}
}

/* ===== Header mobile: 2 hàng khi màn hình quá hẹp ===== */
@media(max-width:360px){
  .nav-inner{
    flex-wrap:wrap;
    height:auto;
    min-height:58px;
    padding:8px 10px;
    row-gap:8px;
  }
  .brand{
    flex:1 1 auto;
  }
  .nav-cta{
    flex:1 1 100%;
    justify-content:center;
    margin-top:4px;
  }
  .nav-cta .btn{
    width:100%;
    max-width:280px;
    padding:10px;
    font-size:.8rem;
  }
}

/* ===== Layout dọc cho trải nhiều lá trên mobile ===== */
@media(max-width:640px){
  .vlabel{
    text-align:center;
    margin-top:10px;
    line-height:1.4;
  }
  .vlabel .vpos{
    display:block;
    font-size:.72rem;
    font-weight:700;
    color:#e3c878;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:4px;
  }
  .vlabel .vname{
    display:block;
    font-size:.95rem;
    font-weight:700;
    color:#f5e6c4;
  }
  .vlabel .vname em{
    color:#e88;
    font-style:normal;
    font-size:.8rem;
  }
}

/* ===== Header mobile: sắp xếp lại theo yêu cầu ===== */
/* Thứ tự từ trái qua phải: logo+tên → loa → Rút bài ngay → burger */
@media(max-width:1080px){
  .nav-inner{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .brand{order:1;flex:1 1 auto;min-width:0}
  .nav-cta{order:2;display:flex;align-items:center;gap:8px;flex-shrink:0}
  .nav-cta .snd-btn{order:1}
  .nav-cta .btn{order:2}
  .burger{order:3;flex-shrink:0}
}

/* ===== Fix tiêu đề trang trải bài bị cắt trên mobile ===== */
@media(max-width:640px){
  .room-head{
    padding-top:24px!important;
    margin-top:0!important;
  }
  .room-head h1{
    font-size:1.6rem!important;
    line-height:1.3!important;
    margin-top:8px!important;
    padding-top:0!important;
  }
  /* Đảm bảo sticky header không che tiêu đề */
  .room{
    padding-top:16px;
  }
}

/* ===== Fix triệt để header: nav-links không tham gia flex order ===== */
@media(max-width:1080px){
  .nav-inner{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .brand{order:1;flex:1 1 auto;min-width:0}
  .nav-cta{order:2;display:flex;align-items:center;gap:8px;flex-shrink:0}
  .nav-cta .snd-btn{order:1}
  .nav-cta .btn{order:2;white-space:nowrap}
  .burger{order:3;flex-shrink:0}
  /* nav-links là dropdown, không tham gia flex layout của header */
  .nav-links{
    order:99;
    position:fixed;
    top:64px;
    right:12px;
    left:auto;
  }
}

/* ===== Fix tiêu đề bị sticky header che (trang trải bài) ===== */
@media(max-width:640px){
  #room{
    scroll-margin-top:80px;
    padding-top:16px;
  }
  #room .wrap.center{
    padding-top:24px!important;
  }
  #room h1{
    font-size:1.65rem!important;
    line-height:1.35!important;
    margin:12px 0 10px!important;
  }
}

/* ============================================================
   HEADER MOBILE - VIẾT LẠI SẠCH SẼ (override tất cả)
   Thứ tự: logo → loa → CTA → burger
   ============================================================ */
@media(max-width:1080px){
  nav.nav .wrap.nav-inner{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    height:60px!important;
    padding:0 12px!important;
  }
  nav.nav .brand{order:1!important;flex:1 1 auto!important;min-width:0!important;margin:0!important}
  nav.nav .nav-cta{
    order:2!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    margin:0!important;
    padding:0!important;
    border:none!important;
    flex-shrink:0!important;
  }
  nav.nav .nav-cta .snd-btn{order:1!important;margin:0!important}
  nav.nav .nav-cta .btn{order:2!important;margin:0!important;white-space:nowrap!important}
  nav.nav .burger{order:3!important;flex-shrink:0!important;margin:0!important}
  nav.nav .nav-links{
    order:99!important;
    position:fixed!important;
    top:60px!important;
    right:12px!important;
    left:auto!important;
    width:260px!important;
  }
}

/* ===== Fix câu hỏi đẩy tiêu đề lên bị che (mobile) ===== */
@media(max-width:640px){
  /* Màn hình kết quả: đảm bảo tiêu đề không bị che */
  #room .wrap{
    padding-top:20px!important;
  }
  #room .center{
    padding-top:10px;
  }
  #room .eyebrow{
    margin-top:0!important;
  }
  /* Câu hỏi hiển thị gọn, không đẩy layout */
  #room .muted i{
    display:block;
    margin:8px 0;
    font-size:.92rem;
    line-height:1.4;
  }
}

/* ===== Đảm bảo tiêu đề màn hình kết quả luôn hiển thị (mobile) ===== */
@media(max-width:640px){
  #room .wrap{
    padding-top:32px!important;
  }
  #room .center .eyebrow{
    display:block!important;
    visibility:visible!important;
    margin-bottom:8px!important;
  }
  #room .center h1{
    display:block!important;
    visibility:visible!important;
    font-size:1.7rem!important;
    margin:8px 0 12px!important;
  }
}

/* ===== Đẩy thẻ kết quả xuống để lộ tiêu đề (mobile) ===== */
@media(max-width:640px){
  #room .result-grid,
  #room .result-list{
    margin-top:24px!important;
  }
  /* Đảm bảo phần tiêu đề có đủ không gian */
  #room .wrap > .center{
    margin-bottom:20px!important;
    padding-bottom:10px!important;
  }
}

/* ===== Đẩy nội dung kết quả xuống để lộ tiêu đề (mobile) ===== */
@media(max-width:640px){
  #room.phase-result{
    padding-top:70px!important;
  }
  #room.phase-result .wrap{
    padding-top:10px!important;
  }
}

/* ===== Fix thư viện: chỉ 1 icon tìm kiếm (mobile) ===== */
@media(max-width:640px){
  .search-wrap .search{
    background-image:none!important;
  }
  .search-wrap .search-icon{
    color:#8a6d1f;
  }
}