/* Ky Pho pages
   extracted from views/pages/kypho/*.php
*/

/* index.php */
.art-list{margin-top:10px;}
  .art-item{display:flex;gap:16px;align-items:flex-start;padding:14px 0;}
  .art-thumb{width:200px;flex:0 0 200px}
  .art-thumb img{width:200px;height:auto;object-fit:cover;border:1px solid #ddd;background:#fff}
  .art-body{flex:1;min-width:0}
  .art-title{margin:0 0 8px 0;font-size:18px}
  .art-title a{text-decoration:none}
  .art-excerpt{margin:0 0 10px 0;line-height:1.55;color:#333}
  .art-meta{font-size:13px;color:#666;display:flex;gap:18px;flex-wrap:wrap}
  .art-sep{border:0;border-top:1px dashed #cfcfcf;margin:0}
  @media (max-width:640px){
    .art-item{gap:12px}
    .art-thumb{width:110px;flex:0 0 110px}
    .art-thumb img{width:110px;height:auto}
  }

/* book.php */
.kypho-head{display:flex;gap:16px;align-items:flex-start;}
  .kypho-cover{flex:0 0 220px;width:220px}
  .kypho-cover img{width:220px;height:auto;object-fit:cover;border:1px solid #ddd;background:#fff}
  .kypho-info{flex:1;min-width:0}

  .kypho-intro{line-height:1.6;color:#222}
  /* NOTE: Muốn intro hiển thị nhiều dòng hơn khi thu gọn, chỉnh max-height ở đây */
  .kypho-intro.is-collapsed{max-height:240px;overflow:hidden;position:relative}
  .kypho-intro.is-collapsed:after{content:'';position:absolute;left:0;right:0;bottom:0;height:48px;background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));}
  /* NOTE: Muốn các nút (Xem thêm/Thu gọn) to hơn/nhỏ hơn, chỉnh padding + font-size ở đây */
  .kypho-toggle{display:inline-block;padding:8px 14px;border:1px solid #c9b27a;background:#fff6dd;border-radius:8px;cursor:pointer;font-size:14px}
  .kypho-toggle:hover{background:#ffefc6}

  .chapter-list{margin-top:14px}
  .chapter-item{padding:10px 0;border-top:1px dashed #cfcfcf}
  .chapter-item:first-child{border-top:0}
  .chapter-title{margin:0 0 6px 0;font-size:16px}
  .chapter-title a{text-decoration:none}
  .chapter-meta{font-size:13px;color:#666;display:flex;gap:18px;flex-wrap:wrap;margin-top:4px}

  .chapter-summary{margin:0 0 8px 0;color:#333;line-height:1.55;position:relative}
  .chapter-summary.is-collapsed{max-height:72px;overflow:hidden}
  .chapter-summary.is-collapsed:after{content:'';position:absolute;left:0;right:0;bottom:0;height:30px;background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));}

  .lesson-preview{margin-top:8px;padding-left:0;list-style:none}
  .lesson-preview.is-collapsed li.kypho-hidden{display:none}
  .lesson-preview li{padding:6px 0;border-top:1px dotted #e0e0e0}
  .lesson-preview li:first-child{border-top:0}
  .lesson-preview a{text-decoration:none}
  .lesson-sum{margin:3px 0 0 0;color:#333;font-size:13px;line-height:1.45}
  .lesson-meta{margin:2px 0 0 0;color:#666;font-size:12px}

  .btn-more{display:inline-block;margin-top:6px}

  @media (max-width:640px){
    .kypho-head{gap:12px}
    .kypho-cover{flex:0 0 120px;width:120px}
    .kypho-cover img{width:120px}
  }

/* chapter.php */
.kypho-bc{font-size:13px;color:#666;margin-bottom:10px}
  .kypho-bc a{text-decoration:none;color:var(--xq-link)}

  .chapter-head{display:flex;gap:16px;align-items:flex-start}
  .chapter-cover{flex:0 0 220px;width:220px}
  .chapter-cover img{width:220px;height:auto;object-fit:cover;border:1px solid #ddd;background:#fff}
  .chapter-info{flex:1;min-width:0}

  .chapter-intro{line-height:1.6;color:#222}
  .chapter-intro.is-collapsed{max-height:150px;overflow:hidden;position:relative}
  .chapter-intro.is-collapsed:after{content:'';position:absolute;left:0;right:0;bottom:0;height:48px;background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));}
  .chapter-toggle{display:inline-block;padding:6px 12px;border:1px solid #c9b27a;background:#fff6dd;border-radius:8px;cursor:pointer;font-size:13px}
  .chapter-toggle:hover{background:#ffefc6}

  .lesson-list{margin-top:14px}
  .lesson-item{padding:10px 0;border-top:1px dashed #cfcfcf}
  .lesson-item:first-child{border-top:0}
  .lesson-title{margin:0 0 6px 0;font-size:16px}
  .lesson-title a{text-decoration:none}
  .lesson-excerpt{margin:0 0 6px 0;color:#333;line-height:1.5}
  .lesson-meta{font-size:13px;color:#666;display:flex;gap:18px;flex-wrap:wrap}

  @media (max-width:640px){
    .chapter-head{gap:12px}
    .chapter-cover{flex:0 0 120px;width:120px}
    .chapter-cover img{width:120px}
  }

/* lesson.php */
.kypho-bc{font-size:13px;color:#666;margin-bottom:10px}
  .kypho-bc a{text-decoration:none;color:var(--xq-link)}

  .kypho-lesson-meta{color:#666;font-size:13px;margin:0 0 10px 0;display:flex;gap:18px;flex-wrap:wrap}

  .kypho-lesson-content{line-height:1.55;font-size:15px}
  .kypho-lesson-content img{max-width:100%;height:auto}

  /* Similar feel to theories/show (but inside current layout) */
  .board-box{margin:10px 0 14px;padding:0;border:0;background:transparent}

  /* toolbar fixes */
  .zvanco-toolbar{margin:8px 0 6px;}

  /* ✅ CONFIG (Kỳ Phổ/Lý thuyết): Canh cụm nút dưới bàn cờ
     - PLAY nằm đúng GIỮA bàn cờ (ngay dưới quân Tướng) nhờ layout GRID trong theory-zvanco.js
     - Bạn muốn chỉnh lại kích thước/canh lề chỉ cần sửa 3 biến CSS dưới đây:
         + --zv-controls-width   : độ rộng thanh nút (mặc định 100% = theo bàn cờ). Ví dụ: 560px
         + --zv-controls-col-gap : khoảng cách giữa cụm [prev] - [play] - [next + ...]
         + --zv-controls-gap     : khoảng cách giữa các nút trong cùng cụm
  */
  #zvanco-viewer{
    --zv-controls-width: 100%;
    --zv-controls-col-gap: 10px;
    --zv-controls-gap: 10px;
  }
  #zvanco-viewer .buttons{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
  #zvanco-viewer .buttons button,#zvanco-viewer .buttons input.play{cursor:pointer}

  /* ✅ FIX: Canh nút điều khiển vào GIỮA BÀN CỜ
     - JS (public/assets/js/theory-zvanco.js) sẽ đưa cụm nút xuống dưới bàn cờ (chèn vào .zvanco-left)
       nên width của thanh nút = width bàn cờ => justify-content:center sẽ canh đúng giữa bàn.
     - Nếu bạn muốn canh lệch trái/phải theo ý:
         + Canh trái  : đổi justify-content:flex-start
         + Canh giữa  : justify-content:center (mặc định)
         + Canh phải  : justify-content:flex-end
     - Muốn tăng/giảm khoảng cách giữa bàn cờ và nút: chỉnh margin-top ở .zvanco-controls-bottom.
  */
  /* Nếu bạn chỉnh mà không thấy thay đổi, hãy giữ !important vì JS (theory-zvanco.js)
     cũng có inject CSS cho toolbar/buttons. */
  #zvanco-viewer .zvanco-controls-bottom{margin-top:10px !important;}
  #zvanco-viewer .buttons.zv-controls{justify-content:center !important;}
  
  /* ✅ FIX: Viền nút điều khiển (Kỳ Phổ) – làm mỏng lại (1px) như yêu cầu */
  /* NOTE: Bạn có thể tự canh theo ý ở block này:
     - border: độ dày/màu viền (vd: 1px)
     - width/height: kích thước nút
     - border-radius: bo góc
  */
  #zvanco-viewer .buttons.zv-controls button,
  #zvanco-viewer .buttons.zv-controls input.play{
    border:1px solid #b7b38a;
    background:#f8f7e8;
    box-shadow:none;
    outline:0;
  }

  #zvanco-viewer .buttons .sep{display:inline-block;width:10px;}
  #zvanco-viewer .speed-box{display:flex;align-items:center;gap:6px;font-size:12px;color:#555}

  .zvanco-layout{display:flex;gap:0px;align-items:flex-start;flex-wrap:wrap}
  .zvanco-left{flex:0 0 auto}
  /* ✅ Movelist narrow theo yêu cầu */
  .zvanco-steps{flex:0 0 110px;min-width:110px;max-width:110px;max-height:520px;overflow:auto;border:1px solid #ddd;background:#fff}
  .zvanco-comment{flex:1 1 280px;min-width:260px;max-height:520px;overflow:auto;border:1px solid #ddd;background:#fff}
  .zvanco-steps table{width:100%}
  .zvanco-steps td{padding:6px 8px;border-bottom:1px solid #eee;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* ✅ Màu chữ theo bên đi */
  .zvanco-steps tr.mv-red td.mv-move{color:#b30000}
  .zvanco-steps tr.mv-black td.mv-move{color:#111}
  .zvanco-steps tr.active{background:#fff7d6}
  .zvanco-comment #divComment{padding:8px 10px;font-size:14px;line-height:1.55}

  @media (max-width:860px){
    .zvanco-layout{flex-direction:column}
    .zvanco-steps,.zvanco-comment{max-height:none}
  }