/* =========================================================
   MeTravel — static/css/nhat-ky-menu.css
   Menu trái kiểu "nhật ký du lịch" (2026-11). Nạp ở base.html SAU metravel.css
   nên áp cho MỌI trang kế thừa base.html. Chỉ dùng var(--nk-…) (tokens.css).
   Giữ nguyên markup cũ: <span class="dot"> nay là ô vẽ icon bằng mask
   (icon theo đường dẫn của link), nên không cần đổi template từng trang.
   ========================================================= */

.rail{
  background:var(--nk-menu);
  padding:32px 0 0;
  overflow-y:auto;
  gap:0;
}

/* ---- Đầu menu: logo núi + ghim, tên, khẩu hiệu viết tay ---- */
.rail .brand{padding:0 24px 24px;text-align:center}
.rail .brand > svg{display:block;margin:0 auto 4px;color:var(--mt-on-primary)}
.rail .logo-text{font-size:32px;font-weight:700;line-height:1;letter-spacing:0}
.rail .brand .brand-khau-hieu{
  margin-top:6px;font-family:var(--nk-font-tay);font-size:18px;font-weight:400;
  color:var(--nk-menu-phu);line-height:1.2;
}
.rail .brand .brand-khau-hieu::before{content:"— "}
.rail .brand .brand-khau-hieu::after{content:" —"}

/* ---- Các mục: bỏ đường ray dọc, mỗi mục là một viên bo góc có icon nét ---- */
.rail .rail-title{display:none}
.rail .stops{margin:0;padding:0 14px;display:flex;flex-direction:column;gap:4px}
.rail .stops::before{display:none}
.rail .stop{
  gap:12px;padding:13px 14px;margin:0;border-radius:14px;
  font-size:15px;font-weight:400;color:var(--nk-menu-chu);min-height:48px;
}
.rail .stop:hover{color:var(--mt-on-primary);background:var(--nk-lang-nen)}
.rail .stop.is-active{background:var(--nk-menu-chon);color:var(--mt-on-primary);font-weight:600}

/* Icon: ô 22px vẽ bằng mask (nét 1.8, màu theo chữ). Mặc định là chấm tròn nhỏ. */
.rail .stop .dot{
  flex:0 0 22px;width:22px;height:22px;margin:0;border:0;border-radius:0;box-shadow:none;
  background:currentColor;transition:none;
  -webkit-mask:var(--nk-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='black'/%3E%3C/svg%3E")) center/contain no-repeat;
          mask:var(--nk-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='black'/%3E%3C/svg%3E")) center/contain no-repeat;
}
.rail .stop.is-active .dot{background:currentColor;border:0;box-shadow:none}
.rail .stop[href^="/abroad"]{--nk-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
.rail .stop[href^="/chuan-bi"]{--nk-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3 8-8M20 12v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9'/%3E%3C/svg%3E")}
.rail .stop[href^="/dich-vu"]{--nk-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7l2-3h4l2 3'/%3E%3Ccircle cx='12' cy='13.5' r='3.5'/%3E%3C/svg%3E")}
.rail .stop[href^="/hoi-dap"]{--nk-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.4A8 8 0 1 1 21 12z'/%3E%3C/svg%3E")}
.rail .stop[href^="/su-kien"]{--nk-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.6 5.6 6.1.7-4.5 4.2 1.2 6L12 16.6 6.6 19.5l1.2-6-4.5-4.2 6.1-.7z'/%3E%3C/svg%3E")}
.rail .stop[href^="/experiences"]{--nk-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V5a2 2 0 0 1 2-2h12v18H6a2 2 0 0 1-2-2zM4 17a2 2 0 0 1 2-2h12'/%3E%3C/svg%3E")}

/* ---- Đáy menu: hình đồi/tháp rồi tới nút ngôn ngữ (dưới cùng như cũ) ---- */
.rail .rail-doi{margin-top:auto;padding-top:16px;line-height:0}
/* Co đúng bề rộng menu (không giới hạn chiều cao: max-height làm hình hẹp lại, hở hai mép) */
.rail .nk-doi-thap{display:block;width:100%;height:auto;margin-top:0}
.rail .rail-foot{
  margin-top:-4px;padding:6px 24px 26px;border-top:0;background:var(--nk-menu-chan);
}
.rail .nk-cong-tac-chuyen{display:inline-flex;border-radius:999px}
.rail .lang,.rail .nk-cong-tac-chuyen{
  padding:4px;border:1px solid var(--nk-lang-vien);background:var(--nk-lang-nen);overflow:visible;
}
.rail .lang a,.rail .nk-cong-tac-chuyen a{padding:9px 16px;border-radius:999px;font-size:14px;font-weight:500;color:var(--mt-on-primary);min-height:36px;
  text-decoration:none;display:inline-block;background:transparent}
.rail .lang a.is-active,.rail .nk-cong-tac-chuyen a.is-active{background:#fff;color:var(--nk-menu);font-weight:600}

/* Điện thoại: menu vẫn là ngăn kéo mở bằng nút Menu như cũ */
@media (max-width:900px){
  .rail{overflow-y:auto;display:flex;flex-direction:column}
  .burger{min-height:48px}
  /* Nút ngôn ngữ VI/EN: đưa lên ngay dưới logo để mở menu là thấy, không phải cuộn xuống đáy
     (nút ở góc trang đã bỏ ở giao diện nhật ký). Hình đồi trang trí ẩn trên điện thoại. */
  .rail .brand{order:0}
  .rail .rail-foot{order:1;margin-top:0;padding:12px 24px;border-top:0;border-bottom:1px solid rgba(255,255,255,.18)}
  .rail nav{order:2}
  .rail .rail-doi{display:none}
}