/* LINKTRUYEN STORY MOBILE V5.1 — COMPACT DETAIL UX FIX
   Mobile-only override for story detail. Desktop/tablet >=701px unchanged.
   Goals:
   - small cover at top-left, title/meta at top-right
   - stats/actions span full width below
   - detailed rating, info card and comments collapsed by default
   - related sidebar hidden on mobile (bottom related carousel remains)
*/

.lt-mobile-story-panels { display:none; }

@media (max-width:700px) {
  .lt-story-v2 {
    padding: .85rem 12px 1.5rem !important;
    max-width: 100% !important;
  }

  .lt-story-v2 .breadcrumb-show {
    margin: 0 0 .8rem !important;
    padding: 0 2px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
  }
  .lt-story-v2 .breadcrumb-show > span:last-child {
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* ── Compact hero ── */
  .lt-story-v2 .story-header {
    display:grid !important;
    grid-template-columns: 96px minmax(0,1fr) !important;
    grid-auto-rows:auto;
    gap: .55rem .85rem !important;
    align-items:start !important;
    padding: 14px !important;
    margin-bottom: .7rem !important;
    border-radius: 20px !important;
    overflow:hidden !important;
  }

  /* Cover remains a true left column */
  .lt-story-v2 .story-header > div:first-child {
    grid-column:1 !important;
    grid-row:1 / span 4 !important;
    align-self:start !important;
    width:96px !important;
    min-width:96px !important;
  }
  .lt-story-v2 .story-header > div:first-child img,
  .lt-story-v2 .story-header > div:first-child > div {
    width:96px !important;
    height:144px !important;
    border-radius:13px !important;
    object-fit:cover !important;
    box-shadow:0 10px 24px rgba(32,20,14,.18) !important;
  }

  /* Important: let inner info children participate in the parent grid.
     This fixes the "everything squeezed into the right column" problem. */
  .lt-story-v2 .story-header > div:nth-child(2) {
    display:contents !important;
  }

  .lt-story-v2 .hastag-show {
    grid-column:2 !important;
    grid-row:1 !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:.32rem !important;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:2px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .lt-story-v2 .hastag-show::-webkit-scrollbar { display:none; }
  .lt-story-v2 .hastag-show > div { display:contents !important; }
  .lt-story-v2 .hastag-show .card-badge,
  .lt-story-v2 .hastag-show a {
    flex:0 0 auto !important;
    white-space:nowrap !important;
    font-size:.66rem !important;
    padding:.28rem .5rem !important;
  }

  .lt-story-v2 .title-show {
    grid-column:2 !important;
    grid-row:2 !important;
    margin:.05rem 0 0 !important;
    font-size:1.48rem !important;
    line-height:1.07 !important;
    letter-spacing:-.025em !important;
    overflow-wrap:anywhere;
  }
  .lt-story-v2 .title-show::before {
    font-size:.54rem !important;
    margin-bottom:.38rem !important;
    letter-spacing:.13em !important;
  }
  .lt-story-v2 .tacgia-show {
    grid-column:2 !important;
    grid-row:3 !important;
    margin:0 !important;
    font-size:.76rem !important;
    line-height:1.35 !important;
  }

  /* V5.1 — stats wrap cleanly; no horizontal crop on the first "lượt đọc" pill */
  .lt-story-v2 .vcrb-show {
    grid-column:1 / -1 !important;
    grid-row:5 !important;
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:.38rem !important;
    width:100% !important;
    min-width:0 !important;
    margin:.35rem 0 0 !important;
    padding:0 !important;
    overflow:visible !important;
    scrollbar-width:none;
  }
  .lt-story-v2 .vcrb-show::-webkit-scrollbar { display:none; }
  .lt-story-v2 .vcrb-show > span {
    flex:0 0 auto !important;
    min-width:0 !important;
    min-height:32px !important;
    margin:0 !important;
    padding:.38rem .58rem !important;
    border-radius:999px !important;
    font-size:.69rem !important;
    line-height:1 !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:.32rem !important;
  }
  .lt-story-v2 .vcrb-show > span:first-child {
    margin-left:0 !important;
    padding-left:.62rem !important;
  }
  .lt-story-v2 .vcrb-show > span .lt-icon {
    width:15px !important;
    height:15px !important;
    flex:0 0 15px !important;
  }

  /* CTAs full-width and clean */
  .lt-story-v2 .action-buttons-show {
    grid-column:1 / -1 !important;
    grid-row:6 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:.55rem !important;
    width:100%;
    margin:.3rem 0 0 !important;
  }
  .lt-story-v2 .action-buttons-show > a,
  .lt-story-v2 .action-buttons-show > .btn-primary {
    width:100% !important;
    min-width:0 !important;
    min-height:44px !important;
    padding:.7rem .48rem !important;
    font-size:.76rem !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:.38rem !important;
  }
  .lt-story-v2 .action-buttons-show > a .lt-icon,
  .lt-story-v2 .action-buttons-show > .btn-primary .lt-icon {
    width:18px !important;
    height:18px !important;
    flex:0 0 18px !important;
  }
  .lt-story-v2 .action-buttons-show .button-show {
    grid-column:1 / -1 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:.5rem !important;
    width:100%;
  }
  .lt-story-v2 .action-buttons-show .button-show .icon-btn {
    width:100% !important;
    min-height:39px !important;
    padding:.55rem .5rem !important;
    justify-content:center !important;
    font-size:.73rem !important;
    border-radius:999px !important;
  }

  /* Detailed panels: collapsed until user explicitly opens one. */
  .lt-story-v2 .star-rating-show,
  .lt-story-v2 .lt-story-sidecard,
  .lt-story-v2 #comments-section {
    display:none !important;
  }
  .lt-story-v2 .star-rating-show.lt-mobile-panel-open {
    grid-column:1 / -1 !important;
    grid-row:7 !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:.7rem !important;
    width:100% !important;
    max-width:none !important;
    margin:.25rem 0 0 !important;
    padding:.85rem !important;
    overflow:visible !important;
    border-radius:14px !important;
  }
  .lt-story-v2 .star-rating-show > div:nth-child(2),
  .lt-story-v2 .star-rating-show > div:nth-child(4) { display:none !important; }
  .lt-story-v2 .star-rating-show > div:nth-child(1) {
    flex:1 1 120px !important;
  }
  .lt-story-v2 .star-rating-show > div:nth-child(3) {
    flex:1 1 150px !important;
    min-width:130px !important;
    max-width:none !important;
  }
  .lt-story-v2 .star-rating-show > div:nth-child(5) {
    flex:1 0 100% !important;
    width:100% !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
    padding-top:.2rem;
  }

  .lt-story-v2 .lt-story-sidecard.lt-mobile-panel-open {
    grid-column:1 / -1 !important;
    grid-row:8 !important;
    display:block !important;
    margin-top:.2rem !important;
    padding:.85rem !important;
    border-radius:14px !important;
  }
  .lt-story-v2 .lt-story-sidecard-kicker { display:none !important; }
  .lt-story-v2 .lt-story-sidecard h2 {
    margin:0 0 .35rem !important;
    font-size:1rem !important;
  }
  .lt-story-v2 .lt-story-side-row { padding:.48rem 0 !important; }
  .lt-story-v2 .lt-story-side-row--stack { gap:.35rem !important; }

  .lt-story-v2 #comments-section.lt-mobile-panel-open {
    display:block !important;
  }

  /* ── Three compact controls directly beneath hero ── */
  .lt-mobile-story-panels {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.45rem;
    margin:0 0 .85rem;
  }
  .lt-mobile-panel-btn {
    min-width:0;
    min-height:44px;
    border:1px solid var(--border);
    border-radius:13px;
    background:var(--bg-card);
    color:var(--text-secondary);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.3rem;
    padding:.5rem .35rem;
    font-family:inherit;
    font-size:.71rem;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 6px 18px rgba(55,35,24,.04);
  }
  .lt-mobile-panel-btn .lt-icon {
    width:16px;
    height:16px;
    color:var(--accent);
  }
  .lt-mobile-panel-btn small {
    font-size:.58rem;
    color:var(--text-muted);
    font-weight:600;
  }
  .lt-mobile-panel-btn.is-active {
    color:var(--accent);
    border-color:color-mix(in srgb,var(--accent) 55%,var(--border));
    background:color-mix(in srgb,var(--accent) 7%,var(--bg-card));
  }

  /* ── Body becomes a single clean stream ── */
  .lt-story-v2 .lt-story-body-grid {
    display:block !important;
    margin-top:.8rem !important;
  }
  .lt-story-v2 .lt-story-main-column > .card,
  .lt-story-v2 > .card {
    padding:1rem !important;
    border-radius:16px !important;
    margin-bottom:1rem !important;
  }
  .lt-story-v2 .lt-story-main-column .section-title {
    font-size:1rem !important;
  }
  .lt-story-v2 .lt-story-main-column p {
    font-size:.88rem !important;
    line-height:1.72 !important;
  }

  /* Related rail duplicates bottom recommendations on mobile, so remove it. */
  .lt-story-v2 .lt-story-recommend-rail {
    display:none !important;
  }

  /* Chapter list compact */
  .lt-story-v2 #chapter-search {
    width:100% !important;
    max-width:none !important;
    min-height:38px !important;
  }
  .lt-story-v2 .chapter-item {
    min-height:52px !important;
    padding:.62rem .55rem !important;
  }
  .lt-story-v2 .chapter-title-name {
    grid-template-columns:82px minmax(0,1fr) !important;
    gap:.25rem;
  }
  .lt-story-v2 .chapter-num { font-size:.76rem !important; }
  .lt-story-v2 .chapter-title-show {
    margin-left:0 !important;
    font-size:.78rem !important;
  }
  .lt-story-v2 .show-chapter-day { display:none !important; }

  /* When comments are opened, make the form comfortable on touch screens. */
  .lt-story-v2 #comments-section textarea {
    min-height:92px;
    font-size:16px !important; /* prevents iOS zoom */
  }

  /* Countdown should not break mobile width */
  .lt-story-v2 #countdown-box {
    padding:.9rem !important;
    gap:.65rem !important;
    margin-bottom:1rem !important;
  }
  .lt-story-v2 #countdown-timer {
    width:100%;
    justify-content:center;
    gap:.38rem !important;
  }
  .lt-story-v2 .cd-block { min-width:42px !important; }
  .lt-story-v2 .cd-num { font-size:1.25rem !important; }

  #related-section {
    margin-top:1rem !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }
}

@media (max-width:390px) {
  .lt-story-v2 .story-header {
    grid-template-columns:88px minmax(0,1fr) !important;
    gap:.5rem .7rem !important;
    padding:12px !important;
  }
  .lt-story-v2 .story-header > div:first-child {
    width:88px !important;
    min-width:88px !important;
  }
  .lt-story-v2 .story-header > div:first-child img,
  .lt-story-v2 .story-header > div:first-child > div {
    width:88px !important;
    height:132px !important;
  }
  .lt-story-v2 .title-show { font-size:1.28rem !important; }
  .lt-mobile-panel-btn span { font-size:.68rem; }
  .lt-mobile-panel-btn small { display:none; }
}


/* V5.1 — extra safety for very narrow phones */
@media (max-width:380px) {
  .lt-story-v2 .vcrb-show {
    gap:.3rem !important;
  }
  .lt-story-v2 .vcrb-show > span {
    font-size:.64rem !important;
    padding:.34rem .48rem !important;
  }
  .lt-story-v2 .action-buttons-show > a,
  .lt-story-v2 .action-buttons-show > .btn-primary {
    font-size:.71rem !important;
    padding:.68rem .35rem !important;
  }
}