/* Documents (tai-lieu)
   extracted from views/pages/documents/*.php
*/

.doc-list{margin-top:10px;}
  .doc-item{display:flex;gap:16px;align-items:flex-start;padding:14px 0;}
  .doc-thumb{width:200px;flex:0 0 200px}
  .doc-thumb img{width:200px;height:auto;object-fit:cover;border:1px solid #ddd;background:#fff}
  .doc-body{flex:1;min-width:0}
  .doc-title{margin:0 0 8px 0;font-size:18px}
  .doc-title a{text-decoration:none}
  /* Featured (Nổi bật) */
  .doc-featured-star{
    display:inline-block;
    color:#d4a300;
    margin-right:6px;
    font-weight:700;
    /* ★ lớn hơn tiêu đề 2px (vd title 14px -> 16px) */
    font-size:1em;
    font-size:calc(1em + 2px);
    line-height:1;
    vertical-align:baseline;
  }
  .doc-excerpt{margin:0 0 10px 0;line-height:1.55;color:#333}
  .doc-meta{font-size:13px;color:#666;display:flex;gap:18px;flex-wrap:wrap}
  .doc-sep{border:0;border-top:1px dashed #cfcfcf;margin:0}
  @media (max-width:640px){
    .doc-item{gap:12px}
    .doc-thumb{width:110px;flex:0 0 110px}
    .doc-thumb img{width:200px;height:auto}
  }

/* Document show */
.doc-detail{margin-top:2px;}

.doc-top{
  display:flex;
  gap:18px;
  align-items:flex-start;
  /* Outer frame for cover + all info (title/author/publisher/cost/views + download box) */
  border:1px dashed #cfcfcf !important;
  border-radius:10px;
  padding:14px;
  background:#fff;
}

.doc-cover{width:240px;flex:0 0 240px;}

/* Cover gets its own frame (as requested) */
.doc-cover-frame{
  border:1px dashed #cfcfcf;
  border-radius:10px;
  padding:10px;
  background:#fff;
}
.doc-cover img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border:0;
  border-radius:8px;
  background:#fff;
}
.doc-cover-placeholder{
  width:100%;
  height:320px;
  border:0;
  border-radius:8px;
  background:#fafafa;
  color:#777;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px;
}

.doc-info{flex:1;min-width:0;}

.doc-title-inline{
  font-size:20px;
  font-weight:700;
  color:#111;
  margin:0 0 10px 0;
  line-height:1.35;

  /* Title in its own box */
  border:1px dashed #cfcfcf;
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
}

.doc-fields{margin-bottom:12px;display:flex;flex-direction:column;gap:8px;}

/* Each meta line (author/publisher/cost/views/...) gets its own box */
.doc-field{
  font-size:14px;
  color:#333;
  line-height:1.5;
  margin:0;
  border:1px dashed #cfcfcf;
  border-radius:10px;
  padding:8px 12px;
  background:#fff;
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
}
.doc-field .k{display:inline-block;min-width:140px;color:#666;}
.doc-field .v{font-weight:600;color:#111;}

.doc-download-card{
  border:1px dashed #cfcfcf;
  border-radius:10px;
  padding:12px;
  display:flex;
  gap:12px;
  background:#fff;
}
.doc-download-cost{
  flex:0 0 92px;
  border-radius:8px;
  background:#c62828;
  color:#fff;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  padding:8px;
  line-height:1.1;
}
.doc-download-cost span{font-size:12px;font-weight:700;opacity:.95;margin-top:4px;}

.doc-download-body{flex:1;min-width:0;}
.doc-download-name{font-size:14px;font-weight:700;color:#333;margin-bottom:4px;}
.doc-download-meta{font-size:13px;color:#666;margin-bottom:8px;}
.doc-download-hint{font-size:13px;color:#444;line-height:1.5;}
.doc-download-note{font-size:13px;color:green;line-height:1.5;}

/* Stack content (name -> note -> button) in the right column */
.doc-download-body{display:flex;flex-direction:column;gap:6px;}

.doc-download-action{margin-top:6px;width:100%;}
.doc-download-action form{width:100%;}
.doc-download-action .DangNhap{width:100%;}

.doc-link{color:#0d6efd;text-decoration:none;}
.doc-link:hover{text-decoration:underline;}

.doc-ad-slot{
  margin:14px 0;
  padding:12px;
  border:1px solid #eee;
  border-radius:10px;
  background:#fafafa;
}

.doc-section{margin-top:16px;}
.doc-section-title{font-weight:800;margin:0 0 10px 0;}
.doc-summary{color:#444;line-height:1.55;margin-bottom:10px;}

.doc-content{
  border:1px solid #eee;
  padding:12px;
  border-radius:10px;
  margin:0;
  color:#666;
}
.doc-content img{max-width:100%;height:auto;}

.doc-demo-frame{border:1px solid #eee;border-radius:10px;overflow:hidden;background:#fff;}
.doc-demo-frame iframe{width:100%;height:560px;border:0;display:block;}
.doc-demo-note{font-size:12px;color:#666;margin-top:6px;}

.doc-back{margin-top:14px;}

/* Tags (document show) */
.doc-tags{
  margin:6px 0 0;
  font-size:13px;
  color:#666;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.doc-tags a{
  font-size:12px;
  padding:3px 6px;
  border:1px solid var(--xq-border2);
  background:#fff;
  text-decoration:none;
  color:#444;
  border-radius:6px;
}

@media (max-width:820px){
  .doc-top{flex-direction:column;}
  .doc-cover{width:100%;flex:0 0 auto;max-width:360px;}
  .doc-download-card{flex-direction:column;}
  .doc-download-cost{width:100%;flex:0 0 auto;flex-direction:row;gap:8px;justify-content:flex-start;}
  .doc-download-action{flex:0 0 auto;}
}

@media (max-width:520px){
  .doc-field .k{min-width:120px;}
  .doc-demo-frame iframe{height:460px;}
}