/* =========================================
   YOUR RESOURCES — Pixel-perfect to Figma
   ========================================= */
:root{
  --u-navy:#0E2E4E;
  --u-green:#649E5F;
  --u-green-100:#E9F3EA;
  --u-green-200:#DCF0DF;
  --u-blue-25:#F4F8FC;
  --u-blue-50:#EAF2FA;
  --u-blue-100:#DCEAF6;
  --u-gray-25:#FBFCFD;
  --u-gray:#F4F5F7;
  --u-border:#DDE3EA;
  --u-text:#27272A;
  --u-muted:#6B7280;
  --u-font:"Nunito","Helvetica Neue",Arial,sans-serif;
}

/* Layout */
.yr{font-family:var(--u-font);color:var(--u-text)}
.yr-body{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:start}
@media (max-width: 980px){.yr-body{grid-template-columns:1fr}}

/* ===================== TOPBAR ===================== */
.yr-toolbar{
  display:flex;align-items:center;gap:12px;margin:8px 0 18px;
}
.yr-counter{
  margin-left: auto;
  font-weight:600;
  font-size:16px;
  color:#89B08A; /* “6 selected” xanh nhạt */
}
.yr-bulk {
    background: #fff;
    color: #162F56;
    border: 1px solid #162F56;
    border-radius: 0 0 24px 0;
    padding: 10px 16px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
}
.yr-bulk:hover{background:var(--u-navy);color:#fff}
.yr-bulk:disabled{opacity:.45;cursor:not-allowed}

.yr-view{display:flex;gap:8px;padding-left: 10px;}
.yr-view button{
  border:1.5px solid var(--u-border);background:#fff;border-radius:10px;
  min-width:40px;height:40px;line-height:40px;text-align:center;cursor:pointer;
  font-size:16px;color:var(--u-navy)
}
.yr-view .active{
  background:var(--u-green);border-color:var(--u-green);color:#fff;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)
}

/* ===================== SIDEBAR ===================== */
.yr-filters{
  background:var(--u-gray-25);border:1px solid var(--u-border);
  border-radius:14px;padding:16px 14px;position:sticky;top:24px
}
.yr-filter-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.yr-filter-head .label{color:var(--u-navy);font-size: 28px;font-weight: 700;}
.yr-filter-head .yr-reset-link{
  background:none;
  border:none;
  color:#649e5f;
  font-weight: 400;
  cursor:pointer;
  font-size: 18px;
}
.yr-filter-stack{display:flex;flex-direction:column;gap:12px}

/* group button (pill) */
.yr-filter-btn{
  width:100%;
  text-align:left;
  background:#fff;
  border:1.5px solid var(--u-border);
  border-radius:12px;
  padding:14px 16px;
  font-weight: 700;
  color:var(--u-navy);
  cursor:pointer;
  position:relative;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  font-size: 18px;
}
.yr-filter-btn:after{
  content:"▾";position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:#94A3B8;font-weight:700
}
.yr-filter-btn.is-active{border-color: #649E5F; background: #D5EBDB;}
/* badge số lượng chọn */
.yr-filter-btn .badge{
  position:absolute;right:30px;top:50%;transform:translateY(-50%);
  background:#ECF7EE;color:var(--u-green);border:1px solid #CDE7D1;
  padding:2px 6px;border-radius:999px;font-size:11px;font-weight:900;display:none
}
.yr-filter-btn.has-badge .badge{display:inline-block}

/* ===================== MODAL/POPOVER ===================== */
/* Popover luôn nổi trên cards và không lộ scrollbar */
.yr-pop{
  position:absolute;
  z-index:1000;                 /* cao hơn card */
  width:320px;
  background:#fff;
  border:1px solid var(--u-border);
  border-radius:12px;
  box-shadow:0 12px 24px rgba(14,46,78,.12);
  padding:8px 0 10px;
  max-height:none;              /* không giới hạn chiều cao */
  overflow:visible;             /* không hiển thị thanh cuộn */
}

/* Ẩn scrollbar nếu trình duyệt vẫn render (phòng xa) */
.yr-pop::-webkit-scrollbar{width:0;height:0}
.yr-pop{scrollbar-width:none;-ms-overflow-style:none}

.yr-pop .yr-pop-inner{padding:0 14px}
.yr-pop h5{margin:10px 0 6px;font-weight:700;font-size:18px;font-family:'Nunito';}
.yr-pop h5.copper{color:#D97706}
.yr-pop h5.fiber{color:#DC2626}
.yr-pop h5.racks{color:#2563EB}
.yr-pop .yr-group-list{list-style:none;margin:0 0 8px;padding: 5px 15px;}
.yr-pop .yr-group-list li{margin: 0}

/* checkbox vuông + tích trắng */
.yr-pop input[type=checkbox]{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:6px;
  border:2px solid #CBD5E1;display:inline-block;position:relative;vertical-align:middle;margin-right:8px;cursor:pointer;background:#fff
}
.yr-pop input[type=checkbox]:checked{
  border-color:var(--u-navy);background:var(--u-navy)
}
.yr-pop input[type=checkbox]:checked:after{
  content:"";position:absolute;left:50%;top:50%;
  width:3px;height:8px;border:2px solid #fff;border-top:none;border-left:none;
  transform:translate(-50%,-58%) rotate(45deg)
}

.yr-pop .yr-actions{display:flex;justify-content:flex-end;gap:10px;padding:8px 14px 0}
.yr-pop .btn{
  border:1.5px solid var(--u-border);background:#fff;color:var(--u-navy);
  border-radius:12px;padding:9px 16px;font-weight:900;cursor:pointer
}
.yr-pop .btn.apply{background:var(--u-green);border-color:var(--u-green);color:#fff}
.yr-pop .btn:hover{filter:brightness(.97)}

/* ===================== GRID ===================== */
.yr-results .yr-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px
}
@media (min-width:1200px){ .yr-results .yr-grid{grid-template-columns:repeat(5,1fr)} }
@media (max-width:1024px){ .yr-results .yr-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){ .yr-results .yr-grid{grid-template-columns:repeat(2,1fr)} }

/* ===================== CARD ===================== */
.yr-card{
  border:1.5px solid var(--u-border);border-radius:12px;background:#fff;overflow:hidden;
  position:relative;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .15s,box-shadow .15s
}
.yr-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(14,46,78,.08)}
/* header xanh nhạt + vòng tròn icon */
.yr-card .thumb{background:var(--u-blue-50);padding: 18px 0 18px;display:flex;justify-content:center;align-items:center}
.yr-card .thumb .circle{
  width: 88px;
  height: 88px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--u-blue-100);
  display:flex;
  align-items:center;
  justify-content:center
}
.yr-card .thumb img{max-width:38px;height:auto}

/* nút chọn (radio) góc trái trên */
.yr-card .sel{
  position:absolute;left:12px;top:12px;width:22px;height:22px;border-radius:50%;
  border:2px solid #CBD5E1;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05)
}
.yr-card.is-selected .sel{border-color:var(--u-navy);background:var(--u-navy)}
.yr-card.is-selected .sel:after{
  content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;
  background:#fff;transform:translate(-50%,-50%)
}

.yr-card .body{padding:10px 12px 0}
.yr-card .badge-type{color:var(--u-green);font-weight: 400;font-size: 14px;line-height: 20px;margin-bottom:5px}
.yr-card .title{
  font-weight: 700;
  color:var(--u-navy);
  font-size: 18px;
  line-height:1.2;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:40px
}

/* actions dưới cùng (căn phải) + icons tròn nhỏ */
.yr-card .actions{display: flex;justify-content:flex-end;align-items:center;gap:12px;padding: 10px 12px 6px;bottom: 10px;}
.yr-ic{
  width:28px;height:28px;border-radius:50%;border:1.5px solid var(--u-navy);
  display:inline-flex;align-items:center;justify-content:center;color:var(--u-navy);
  text-decoration:none;font-weight:900
}
.yr-ic:hover{background:var(--u-navy);color:#fff}
.yr-actions-check{transform:translateY(1px)}
.yr-card input.pick{width:18px;height:18px;accent-color:var(--u-navy)}

/* ===================== LIST VIEW ===================== */
.yr-list .row{
  display:grid;grid-template-columns:32px 60px 1fr 80px 90px;gap:12px;
  border-bottom:1px solid var(--u-border);padding:12px 0;align-items:center
}
.yr-list .icon img{max-width:36px}
.yr-list .title{font-weight:900;color:var(--u-navy)}
.yr-list a{color:var(--u-navy);text-decoration:none;font-weight:900}
.yr-list a:hover{text-decoration:underline}

/* ===================== PAGINATION ===================== */
.yr-pagination{display:flex;justify-content:center;gap:6px;margin:24px 0}
.yr-pagination button{
  border:1px solid var(--u-border);background:#fff;border-radius:12px;padding:6px 12px;
  color:var(--u-navy);font-weight:900;cursor:pointer
}
.yr-pagination button:hover{background:var(--u-green);color:#fff;border-color:var(--u-green)}

/* ===================== EMPTY ===================== */
.yr-empty{text-align:center;color:var(--u-muted);font-style:italic;margin:24px 0}

/* ===== View / Download Buttons (SVG) ===== */
.yr-btn-icon {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
}
.yr-btn-icon img {
  width: 16px;
  height: 16px;
  filter: invert(9%) sepia(25%) saturate(1700%) hue-rotate(
269deg) brightness(97%) contrast(94%);
  transition:filter .2s, transform .2s;
}
.yr-btn-icon:hover img {
  filter:invert(49%) sepia(8%) saturate(1407%) hue-rotate(72deg) brightness(97%) contrast(90%); /* xanh lá #649E5F */
  transform:scale(1.05);
}
.yr-btn-icon:active img {
  transform:scale(0.95);
}

.yr-toolbar .yr-actions {
 display: flex;
}

/* đảm bảo card có lớp xếp tầng */
.yr-card { position: relative; }

/* header không chặn click vào nút chọn */
.yr-card .thumb,
.yr-card .thumb::before {
  pointer-events: none;     /* cho phép click xuyên qua header */
  z-index: 1;
}

/* nút chọn tròn luôn ở trên cùng */
.yr-card .sel {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 3;               /* cao hơn header */
  cursor: pointer;
  /* ...các style khác của .sel giữ nguyên... */
}

.yr-bulk[disabled]{ opacity:.6; cursor:not-allowed; }



/* Checkbox section (Copper/Fiber/Racks) – dạng vuông + trạng thái partial */
.yr-sec-head{display:flex;align-items:center;gap:8px;margin:8px 0 4px}
.yr-sec-head input[type=checkbox]{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:6px;
  border:2px solid #CBD5E1;background:#fff;cursor:pointer;position:relative
}
.yr-sec-head input[type=checkbox]:checked{background:#0E2E4E;border-color:#0E2E4E}
.yr-sec-head input[type=checkbox]:checked:after{
  content:"";position:absolute;left:50%;top:50%;
  width:3px;height:8px;border:2px solid #fff;border-top:none;border-left:none;
  transform:translate(-50%,-58%) rotate(45deg)
}
/* trạng thái partial (một phần con được tick) */
.yr-sec-head input[type=checkbox][data-partial="1"]{
  background:#fff;border-color:#0E2E4E;
}
.yr-sec-head input[type=checkbox][data-partial="1"]::after{
  content:"";position:absolute;left:50%;top:50%;
  width:10px;height:2px;background:#0E2E4E;transform:translate(-50%,-50%);
  border:none;
}

/* ===== Loading overlay for results ===== */
.yr-results{ position: relative; }
.yr-loading{
  position:absolute; inset:0;
  display:none; align-items:center; justify-content:center;
  background:rgba(255,255,255,.65);
  backdrop-filter:saturate(120%) blur(2px);
  z-index:5;
}
.yr-loading .yr-spinner{
  width:36px; height:36px; border-radius:50%;
  border:3px solid #CFE2D1; border-top-color:#649E5F;
  animation: yrspin 0.9s linear infinite;
}
@keyframes yrspin{ to{ transform:rotate(360deg); } }

/* (tuỳ chọn) hiệu ứng skeleton cho card khi đang tải */
.yr.is-loading .yr-card,
.yr.is-loading .row { pointer-events:none; }
.yr-skel{
  border:1.5px solid var(--u-border); border-radius:12px; background:#fff; overflow:hidden;
}
.yr-skel .thumb{ background:var(--u-blue-50); height:96px; }
.yr-skel .body{ padding:10px 12px; }
.yr-skel .line{
  height:12px; border-radius:6px; background:linear-gradient(90deg,#eef2f7 25%,#f6f8fb 37%,#eef2f7 63%);
  background-size:400% 100%; animation: yrshimmer 1.2s ease-in-out infinite;
  margin:8px 0;
}
@keyframes yrshimmer{ 0%{background-position:100% 0} 100%{background-position:-100% 0} }

/* Ẩn caret cho nhóm không có submenu */
.yr-filter-btn.no-caret:after { display: none; }

/* Chip tags for White Paper */
.yr-pop .yr-chip-selected { display:flex; flex-wrap:wrap; gap:.5rem; margin:6px 0 10px; }
.yr-pop .yr-chip-list     { display:flex; flex-wrap:wrap; gap:.5rem; }

.yr-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid #e5e7eb; border-radius:9999px; padding:.35rem .75rem;
  font-size:14px; background:#fff; cursor:pointer; line-height:1;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.yr-chip:hover{ background:#f8fafc; }
.yr-chip--picked{ background:#e6f3eb; border-color:#bfe0c8; }
.yr-chip--picked i{ font-style:normal; font-weight:700; opacity:.7; }
.yr-chip--picked i:hover{ opacity:1; }

.yr-active-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 10px 2px}
.yr-chip{padding:6px 10px;border-radius:16px;background:#eef1f5;border:none;cursor:pointer}
.yr-chip--picked{background:#e9edf7}
.yr-chip--mini{font-size:12px;line-height:1}
.yr-chip i{margin-left:6px;font-style:normal;opacity:.7}

/* ==== LIST VIEW ==== */
.yr-list { display: grid; gap: 14px; }

.yr-li{
  display:grid;
  grid-template-columns: 44px 56px 1fr auto;
  align-items:center;
  gap:16px;
  padding:14px 16px;
  border:1px solid #e8ecf3;
  border-radius:12px;
  background:#fff;
  transition: box-shadow .2s, border-color .2s, background .2s;
}
.yr-li:hover{ box-shadow:0 4px 14px rgba(16,24,40,.06); border-color:#dfe7f3; }

.yr-li.is-selected{ border-color:#98c7a4; background:#f6fbf7; }

.yr-li__pick { position:relative; display:flex; align-items:center; justify-content:center; width:44px; height:44px; }
.yr-li__pick input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.yr-li__pick .dot{
  width:20px; height:20px; border-radius:50%;
  border:2px solid #8aa0b5; box-sizing:border-box; display:block;
  transition:.15s;
}
.yr-li.is-selected .yr-li__pick .dot{ border-color:#2f7d44; background:#2f7d44; box-shadow:0 0 0 4px rgba(47,125,68,.15); }

.yr-li__thumb img, .yr-li__thumb span{
  width:64px; height:64px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:#eef4ff; font-size:22px;
}
.yr-li__thumb img{ width:64px; height:64px; object-fit:contain; background:#eef4ff; border-radius:50%; padding:8px; }

.yr-li__meta{ min-width:0; }
.yr-li__type{
  font-size:12px; color:#48a05f; font-weight:600; line-height:1.2; margin-bottom:4px;
}
.yr-li__title{
  font-size:16px; color:#0f1d2e; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.yr-li__actions{ display:flex; align-items:center; gap:18px; }
.yr-btn-icon:hover{ background:#f2f6ff; border-color:#cfd9eb; }
.yr-btn-icon:active{ transform:scale(.98); }
.yr-btn-icon img{ width:18px; height:18px; display:block; }

/* Accessibility helper (screen readers only) */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Optional: tighten gap on mobile */
@media (max-width: 640px){
  .yr-li{ grid-template-columns: 40px 48px 1fr auto; gap:12px; padding:12px; }
  .yr-li__thumb img{ width:40px; height:40px; }
  .yr-li__title{ font-size:15px; }
}

/* --- Pin hàng icon xuống đáy & canh phải, mọi card có cùng chiều cao trong hàng --- */

/* 1) Mỗi card là 1 flex column */
.yr-results .yr-grid > .yr-card{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 2) Phần nội dung co giãn, đẩy actions xuống đáy */
.yr-card .body{
  flex: 1 1 auto;
}

/* 3) Hàng action nằm sát đáy, sát phải, khoảng cách đồng nhất */
.yr-grid .yr-card .actions{
  margin-top: auto;                /* ép xuống đáy card */
  padding: 12px;                   /* padding đều 4 phía */
  display: flex;
  align-items: center;
  justify-content: flex-end;       /* sát phải */
  gap: 12px;
}

/* 4) Đảm bảo item trong grid “cao bằng nhau” theo card cao nhất trong cùng hàng */
.yr-results .yr-grid{
  align-items: stretch;
}

/* đặt caret sang phải, không đụng vùng click của label */
.yr-filter-btn { position: relative; padding-right: 42px; }
.yr-filter-btn .yr-caret{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border:1px solid var(--u-border);
  border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#6b7280; cursor:pointer;
}
.yr-filter-btn.is-active .yr-caret{ background:#f6faff; border-color:#dbe6f7; }

/* ==== FILTER BUTTON LAYOUT ==== */
.yr-filter-btn{
  position: relative;
  width: 100%;
  display: block;
  padding: 12px 44px 12px 14px; /* chừa chỗ cho caret bên phải */
  border-radius: 10px;
  background: #F5FAF5;
  border: 1px solid #D9E7D9;
  color: #133015;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
}

/* trạng thái active khi đang "View all" hoặc đang mở popover */
.yr-filter-btn.is-active,
.yr-filter-btn.has-badge{
  background: #E5F2E6;
  border-color: #BFD7C0;
}

/* ==== BADGE SỐ LƯỢNG ==== */
.yr-filter-btn .badge{
  position: absolute;
  right: 44px;              /* đứng trước caret */
  top: 50%;
  transform: translateY(-50%);
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #DCEEDF;
  color: #2E6B35;
  font-size: 12px;
  line-height: 22px;
  text-align: center;
}

/* ==== CARET (chevron) ==== */
.yr-filter-btn .yr-caret{
  position: absolute;
  right: 8px;               /* sát mép phải */
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  width: 28px; height: 28px;            /* hit-area lớn, dễ bấm */
  border-radius: 8px;
  display: grid; place-items: center;
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, transform .2s ease;
  color: #2F6236;
}

/* hover/focus cho caret mượt hơn */
.yr-filter-btn .yr-caret:hover,
.yr-filter-btn .yr-caret:focus-visible{
  background: #EAF6EC;
  outline: none;
}

/* xoay caret khi popover mở */
.yr-filter-btn.is-active .yr-caret{
  transform: translateY(-50%) rotate(180deg);
}

/* Ẩn caret ở nhóm không có popover */
.yr-filter-btn.no-caret .yr-caret{ display: none; }

/* Mobile: thu nhỏ hit-area một chút nếu cần */
@media (max-width: 768px){
  .yr-filter-btn{ padding-right: 40px; }
  .yr-filter-btn .badge{ right: 40px; }
  .yr-filter-btn .yr-caret{ width: 26px; height: 26px; }
}