/* Cẩm nang is a visual how-to reading shelf, not another destination explorer.
   Mobile follows the image-left/editorial-right swipe rhythm of Khám phá.
   The existing /explore mobile layout is intentionally untouched. */
.home-library-mobile-title,.home-library-mobile-cta,.home-library-swipe-hint{display:none}
#top>.home-library-section{
  grid-column:1/-1!important;
  padding-top:30px!important;
  padding-bottom:32px!important;
}
.home-library-section .section-heading{margin-bottom:12px}
.home-library-section .section-heading h2{max-width:860px}
.home-library-section .home-library-intro{
  margin:0 0 19px;
  max-width:670px;
  font-size:15px;
  line-height:1.55;
  color:#556d66;
}
.home-library-section .home-library-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
  overflow:visible;
}
#top .home-library-grid>.home-library-card{
  position:relative;
  display:flex;
  flex-direction:row;
  align-items:stretch;
  gap:0;
  min-width:0;
  min-height:222px;
  padding:0;
  overflow:hidden;
  border:1px solid #d8e5df;
  border-radius:23px;
  background:#fff;
  box-shadow:none;
  text-decoration:none;
  color:#123d3b;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
#top .home-library-grid>.home-library-card:hover,
#top .home-library-grid>.home-library-card:focus-visible{
  transform:translateY(-2px);
  border-color:#8db6a6;
  box-shadow:0 10px 30px rgba(17,59,51,.08);
}
.home-library-card-image{
  display:block;
  width:38%;
  flex:0 0 38%;
  margin:0;
  overflow:hidden;
  background:#edf4ef;
}
.home-library-card-image img{
  display:block;
  width:100%;
  height:100%;
  min-height:222px;
  aspect-ratio:4/5;
  object-fit:cover;
  transition:transform .32s ease;
}
.home-library-card:hover .home-library-card-image img{transform:scale(1.025)}
.home-library-card-image.is-missing{display:none}
.home-library-card-copy{
  display:flex;
  flex:1;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:21px 22px;
  gap:0;
}
#top .home-library-card-copy .home-library-topic{
  display:block;
  margin:0 0 11px;
  color:#467a68;
  letter-spacing:.13em;
  font-size:11px;
  line-height:1.3;
  font-weight:850;
}
#top .home-library-card-copy strong{
  display:block;
  margin:0;
  color:#153c38;
  font-size:clamp(21px,2.15vw,27px);
  font-weight:850;
  letter-spacing:-.033em;
  line-height:1.18;
}
.home-library-card-copy p{
  margin:10px 0 0;
  color:#526b64;
  font-size:14px;
  line-height:1.55;
}
#top .home-library-card-copy .home-library-action{
  display:inline-flex;
  margin:14px 0 0;
  padding:0;
  color:#21694f;
  font-size:13px;
  line-height:1.35;
  font-weight:800;
}
.home-library-section .home-library-footer{margin-top:17px}
.home-library-section .home-library-footer a{
  min-height:34px;
  padding:7px 11px;
}
@media(max-width:940px) and (min-width:761px){
  #top .home-library-grid>.home-library-card{min-height:210px}
  .home-library-card-image img{min-height:210px}
  .home-library-card-copy{padding:15px}
  #top .home-library-card-copy strong{font-size:20px}
  .home-library-card-copy p{font-size:13px}
}
@media(max-width:760px){
  #top>.home-library-section{
    padding:23px 0 25px!important;
    scroll-margin-top:68px;
  }
  .home-library-section>.section-heading{
    display:block;
    margin:0 0 10px!important;
  }
  .home-library-section>.section-heading .eyebrow{
    margin:0;
    font-size:10px!important;
    letter-spacing:.13em;
    line-height:1.4;
  }
  .home-library-section>.section-heading h2{
    margin:7px 0 0;
    max-width:540px;
    font-size:clamp(27px,6.8vw,33px)!important;
    line-height:1.08!important;
    letter-spacing:-.035em;
  }
  .home-library-desktop-title,.home-library-section>.section-heading>a{display:none}
  .home-library-mobile-title{display:inline}
  .home-library-section .home-library-intro{
    display:block;
    margin:0 0 13px;
    max-width:500px;
    font-size:13px;
    line-height:1.45;
  }
  #top .home-library-section .home-library-grid{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:stretch;
    gap:12px;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:2px 9vw 5px 1px;
    margin:0;
    max-width:100%;
    min-width:0;
  }
  .home-library-section .home-library-grid::-webkit-scrollbar{display:none}
  #top .home-library-section .home-library-grid>.home-library-card,
  #top .home-library-section .home-library-grid>.home-library-card:first-child,
  #top .home-library-section .home-library-grid>.home-library-card:nth-child(2),
  #top .home-library-section .home-library-grid>.home-library-card:nth-child(3),
  #top .home-library-section .home-library-grid>.home-library-card:nth-child(n+4){
    display:flex!important;
    flex:0 0 min(87vw,410px);
    flex-direction:row!important;
    min-width:0!important;
    width:min(87vw,410px)!important;
    min-height:215px!important;
    height:auto!important;
    max-height:none!important;
    padding:0!important;
    gap:0!important;
    margin:0!important;
    border:1px solid #dce8e2!important;
    border-radius:22px!important;
    background:#fff!important;
    scroll-snap-align:start;
    transform:none!important;
    overflow:hidden;
  }
  #top .home-library-section .home-library-card:after{display:none!important}
  .home-library-section .home-library-card-image{
    display:block;
    flex:0 0 35%;
    width:35%;
    min-height:215px;
    max-width:35%;
    margin:0;
    overflow:hidden;
  }
  .home-library-section .home-library-card-image img{
    display:block;
    width:100%;
    height:100%;
    min-height:215px;
    aspect-ratio:3/5;
    object-fit:cover;
  }
  .home-library-section .home-library-card-image.is-missing{display:none}
  .home-library-section .home-library-card-copy{
    display:flex;
    flex:1;
    min-width:0;
    align-items:flex-start;
    justify-content:center;
    gap:0;
    padding:19px 16px!important;
  }
  #top .home-library-section .home-library-card-copy .home-library-topic{
    grid-area:auto;
    margin-bottom:8px;
    font-size:10px;
    letter-spacing:.1em;
  }
  #top .home-library-section .home-library-card-copy strong{
    grid-area:auto;
    font-size:clamp(20px,5.15vw,25px)!important;
    line-height:1.17!important;
    letter-spacing:-.03em;
  }
  #top .home-library-section .home-library-card-copy p{
    display:block!important;
    margin:9px 0 0;
    font-size:13px;
    line-height:1.42;
  }
  #top .home-library-section .home-library-card-copy .home-library-action{
    display:block!important;
    margin-top:12px;
    font-size:13px;
  }
  .home-library-section .home-library-footer{display:none}
  .home-library-swipe-hint{
    display:block;
    margin:8px 0 0;
    font-size:12px;
    color:#698077;
  }
  .home-library-mobile-cta{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:15px;
    min-height:46px;
    padding:11px 15px;
    border:1px solid #bed7ca;
    border-radius:15px;
    background:#fff;
    color:#1b694e;
    font-size:14px;
    line-height:1.35;
    font-weight:800;
    text-align:center;
    text-decoration:none;
  }
}
@media(max-width:375px){
  #top .home-library-section .home-library-grid>.home-library-card{
    flex-basis:91vw;
    width:91vw!important;
  }
  .home-library-section .home-library-card-image{flex-basis:31%;width:31%;max-width:31%}
  .home-library-section .home-library-card-copy{padding:14px 12px!important}
  #top .home-library-section .home-library-card-copy strong{font-size:20px!important}
}


/* Chuyện đảo now groups quick curiosities and longer narratives in one section. */
#top>.discover-section{padding-bottom:34px!important}
.island-story-subsection{
  margin-top:30px;
  padding-top:24px;
  border-top:1px solid #dfebe5;
}
.island-story-subheading{margin-bottom:18px}
.island-story-subheading>span{
  display:block;
  color:#4e8274;
  font-size:11px;
  font-weight:850;
  line-height:1.4;
  letter-spacing:.14em;
}
.island-story-subheading h3{
  margin:8px 0 0;
  font-size:clamp(25px,2.6vw,34px);
  line-height:1.12;
  letter-spacing:-.035em;
  color:#173d38;
}
@media(max-width:760px){
  .island-story-subsection{margin-top:22px;padding-top:20px}
  .island-story-subheading{margin-bottom:13px}
  .island-story-subheading h3{font-size:clamp(24px,6.3vw,29px)}
}