/* Nông Trại Khoai — "hai màn hình" cho trang chủ (05/10/2026)
   Ngăn chính + ngăn "Câu chuyện Khoai" nằm cạnh nhau; nút nổi #nutMan trượt cả trang sang ngăn kia.
   Chỉ có tác dụng khi <html> có class hai-man-bat (script nhỏ trong <head>) — tắt JS thì hai ngăn xếp dọc như trang thường.
   Đi cùng js/hai-man.js. Màu lấy từ biến của trang nên đổi tông Xanh/Vàng là đổi theo. */

/* ---- Khung ---- */
html.hai-man-bat .hai-man{ position: relative; overflow-x: clip; }
html.hai-man-bat .hai-man-day{ position: relative; }

/* Ngăn đang ẩn: vẫn có bố cục (đo được kích thước, IntersectionObserver vẫn gắn) nhưng cao 0, không thấy, không bấm được. */
html.hai-man-bat .man:not(.dang-mo){
  position: absolute; top: 0; left: 0; width: 100%;
  height: 0; overflow: hidden; visibility: hidden; pointer-events: none;
}

/* ---- Lúc đang trượt: hai ngăn đứng cạnh nhau trong một dải rộng 200% ---- */
html.hai-man-bat .hai-man-day.dang-truot{
  display: flex; align-items: flex-start; width: 200%; will-change: transform;
}
html.hai-man-bat .hai-man-day.dang-truot > .man{
  position: relative; flex: 0 0 50%; width: 50%; visibility: visible; pointer-events: none;
}
html.hai-man-bat .hai-man-day.dang-truot > .man.dang-roi{ overflow: hidden; }   /* ngăn cũ bị cắt đúng bằng một màn hình */

/* ---- Nút nổi: củ khoai, dán mép phải, nằm GIỮA chiều cao màn hình cho dễ thấy ---- */
.nut-man{ display: none; }
html.hai-man-bat .nut-man{
  position: fixed; z-index: 45; right: 0; top: 50%; margin-top: -28px;
  display: inline-flex; align-items: center; flex-direction: row-reverse; justify-content: flex-start; gap: 0;
  height: 56px; padding: 0 3px 0 10px;
  border: 2px solid var(--den-ho-phach); border-right: 0; border-radius: 28px 0 0 28px;
  background: var(--nen-chim); color: var(--chu-nhat);
  font-family: inherit; font-size: .84rem; font-weight: 700; line-height: 1; letter-spacing: .01em;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .55), 0 0 18px rgba(var(--rgb-nhan), .35);
  transition: transform .3s ease, opacity .25s ease, box-shadow .25s ease;
  animation: nut-man-nhip 2.4s ease-out 2.2s 3;
}
.nut-man-hinh{ flex: 0 0 auto; display: block; width: 42px; height: 35px; transition: transform .25s ease; }
html.hai-man-bat .nut-man:active .nut-man-hinh{ transform: scale(.88) rotate(-6deg); }
html.hai-man-bat .nut-man:focus-visible{ outline: 3px solid var(--den-ho-phach-nhat); outline-offset: 3px; }
@media (hover: hover){
  html.hai-man-bat .nut-man:hover{ box-shadow: 0 8px 22px rgba(0, 0, 0, .55), 0 0 28px rgba(var(--rgb-nhan), .65); }
  html.hai-man-bat .nut-man:hover .nut-man-hinh{ transform: rotate(-8deg) scale(1.06); }
}

/* Đang cuộn: nút thụt gần hết vào mép để không che chữ đang đọc; dừng cuộn là thò ra lại */
html.hai-man-bat .nut-man.dang-cuon:not(.mo-chu):not(:focus-visible){ transform: translateX(62%); opacity: .75; }
html.hai-man-bat .nut-man[data-canh="trai"].dang-cuon:not(.mo-chu):not(:focus-visible){ transform: translateX(-62%); }

/* Chữ: thu gọn còn củ khoai, bung ra khi mới vào trang, khi rê chuột / lấy nét, hoặc vừa đổi ngăn */
.nut-man-chu{
  display: inline-block; max-width: 0; margin: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  color: var(--den-ho-phach-nhat);
  transition: max-width .35s ease, opacity .25s ease, margin .35s ease;
}
.nut-man-chu-di::after{ content: " \203A"; }          /* › */
.nut-man-chu-ve::before{ content: "\2039 "; }          /* ‹ */
.nut-man-chu-ve{ display: none; }
html.hai-man-bat .nut-man.mo-chu .nut-man-chu,
html.hai-man-bat .nut-man:focus-visible .nut-man-chu{ max-width: 190px; opacity: 1; margin: 0 8px 0 4px; }
@media (hover: hover){
  html.hai-man-bat .nut-man:hover .nut-man-chu{ max-width: 190px; opacity: 1; margin: 0 8px 0 4px; }
}

/* Dán mép TRÁI (mặc định ở ngăn Câu chuyện, hoặc khi khách kéo nút sang trái): chữ bung sang phải */
html.hai-man-bat .nut-man[data-canh="trai"]{
  right: auto; left: 0; flex-direction: row;
  padding: 0 10px 0 3px;
  border: 2px solid var(--den-ho-phach); border-left: 0; border-radius: 0 28px 28px 0;
  animation: none;
}
html.hai-man-bat .nut-man[data-canh="trai"].mo-chu .nut-man-chu,
html.hai-man-bat .nut-man[data-canh="trai"]:focus-visible .nut-man-chu{ margin: 0 4px 0 8px; }
@media (hover: hover){
  html.hai-man-bat .nut-man[data-canh="trai"]:hover .nut-man-chu{ margin: 0 4px 0 8px; }
}
/* Nhãn theo ngăn: ngăn chính "Câu chuyện Khoai ›", ngăn Câu chuyện "‹ Về trang chính" */
html.hai-man-bat body.o-chuyen .nut-man-chu-di{ display: none; }
html.hai-man-bat body.o-chuyen .nut-man-chu-ve{ display: inline-block; }

/* Đang được kéo bằng chuột / ngón tay: bám theo con trỏ, hình tròn, nổi hơn */
html.hai-man-bat .nut-man.dang-keo{
  transition: none; animation: none; cursor: grabbing; opacity: .95; border: 2px solid var(--den-ho-phach); border-radius: 28px;
  padding: 0 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, .6), 0 0 30px rgba(var(--rgb-nhan), .7);
}
html.hai-man-bat .nut-man.dang-keo .nut-man-chu{ max-width: 0; opacity: 0; margin: 0; }

@keyframes nut-man-nhip{
  0%   { box-shadow: 0 8px 22px rgba(0,0,0,.55), 0 0 0 0 rgba(var(--rgb-nhan), .7); }
  70%  { box-shadow: 0 8px 22px rgba(0,0,0,.55), 0 0 0 16px rgba(var(--rgb-nhan), 0); }
  100% { box-shadow: 0 8px 22px rgba(0,0,0,.55), 0 0 0 0 rgba(var(--rgb-nhan), 0); }
}

/* Điện thoại: nút gọn hơn (chỉ ~40px rộng) để lấn vào lề trang tối thiểu */
@media (max-width: 800px){
  html.hai-man-bat .nut-man{ height: 52px; margin-top: -26px; padding: 0 1px 0 7px; }
  html.hai-man-bat .nut-man[data-canh="trai"]{ padding: 0 7px 0 1px; }
  .nut-man-hinh{ width: 36px; height: 30px; }
}

/* Mở hamburger thì ẩn nút (menu phủ gần hết màn hình) */
html.hai-man-bat body.menu-dang-mo .nut-man{ opacity: 0; pointer-events: none; }

/* ---- Giảm chuyển động: đổi ngăn tức thì, không nhịp, không bung chữ ---- */
@media (prefers-reduced-motion: reduce){
  html.hai-man-bat .nut-man{ animation: none; transition: none; }
  .nut-man-chu, .nut-man-hinh{ transition: none; }
  html.hai-man-bat .nut-man.dang-cuon:not(.mo-chu){ transform: none; opacity: 1; }
}