/* ============================================================
   MovieInfo CMS — front-end stylesheet
   Faithful match: 7-col grid on grey panel, blue section bars,
   black quality badge (bottom-right), 2-line clamped titles.
   Mobile-first cascade: 7 / 6 / 4 / 3 / 2 / 2.
   ============================================================ */

/* ---- reset / base ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: #fff; color: #333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px; line-height: 1.55;
}
a { color: #087fbd; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
h1 { font-size: 20px; margin: 12px 9px; line-height: 1.3; }

.container { max-width: 1180px; margin: 0 auto; }

/* ---- header ---- */
.header {
    background: #292d31;
    border-bottom: 2px solid #e91e63;
    padding: 12px 9px;
}
.header-inner { max-width: 1180px; margin: 0 auto; }
.logo { color: #fff; font-size: 18px; font-weight: 700; line-height: 1; }
.logo:hover { color: #fff; text-decoration: none; }
.logo b { color: #e91e63; }

/* ---- bookmark bar ---- */
.bookmark {
    min-height: 40px; padding: 7px 10px;
    display: flex; justify-content: center; align-items: center;
    border-bottom: 2px solid #ff9800;
    font-size: 12px; text-align: center;
}
.bookmark strong { color: #168b24; margin-right: 5px; }

/* ---- share area ---- */
.share-area { padding: 9px; border-bottom: 1px solid #dddddd; }
.share-title { margin-bottom: 8px; color: #333333; font-size: 12px; font-weight: 700; }
.socials { display: flex; gap: 8px; }
.social {
    width: 31px; height: 31px;
    display: flex; justify-content: center; align-items: center;
    border-radius: 3px; color: #fff; font-size: 16px; font-weight: bold;
}
.social:hover { color: #fff; text-decoration: none; opacity: .9; }
.facebook { background: #4267a9; }
.whatsapp { background: #25b65b; }
.twitter  { background: #1da1f2; }
.telegram { background: #229ed9; }

/* ---- section title bars ---- */
.section-title {
    width: 100%; padding: 7px 10px;
    background: #1595d3; color: #fff;
    font-size: 13px; font-weight: 700; line-height: 1.4;
}

/* ---- notice ---- */
.notice { padding: 7px 9px; border-bottom: 1px solid #dddddd; font-size: 12px; line-height: 1.6; }
.notice strong { color: #e60000; }

/* ---- intro / seo header ---- */
.intro { padding: 2px 9px; }
.seo-header h1 { margin: 10px 2px; }
.seo-header h2 { margin: 10px 2px 4px; color: #006699; font-size: 15px; }
.seo-header p  { margin: 6px 2px; color: #555; font-size: 13px; }

/* ---- movie grid ---- */
.movie-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 9px; padding: 9px; background: #f4f5f6;
}
.movie-card {
    display: block; min-width: 0;
    background: #fff; border: 1px solid #d9d9d9; border-radius: 5px;
    overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08);
    transition: .15s ease;
}
.movie-card:hover {
    border-color: #1595d3; box-shadow: 0 3px 9px rgba(0,0,0,.14);
    transform: translateY(-2px); text-decoration: none;
}
.movie-poster { position: relative; width: 100%; overflow: hidden; background: #eee; }
.movie-poster img { display: block; width: 100%; aspect-ratio: 2/3; object-fit: cover; transition: transform .25s ease; }
.movie-card:hover .movie-poster img { transform: scale(1.035); }
.quality-badge {
    position: absolute; right: 5px; bottom: 5px;
    padding: 3px 6px; background: rgba(0,0,0,.82); color: #fff;
    border-radius: 3px; font-size: 10px; line-height: 1.2; font-weight: 700;
}
.movie-info { padding: 8px 6px 9px; text-align: center; }
.movie-title {
    min-height: 37px; color: #087fbd;
    font-size: 13px; font-weight: 700; line-height: 1.4;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

/* ---- category / other lists ---- */
.category-list, .other-list { margin: 0; padding: 0; list-style: none; }
.category-list li, .other-list li { border-bottom: 1px solid #e1e1e1; }
.category-list a, .other-list a { display: block; padding: 11px 9px; color: #087fbd; font-size: 13px; line-height: 1.5; }
.category-list a:hover, .other-list a:hover { background: #f6f6f6; text-decoration: none; }
.folder { margin-right: 5px; display: inline-block; }
.red { color: #e60000; }

/* ---- breadcrumb ---- */
.breadcrumb { padding: 9px; font-size: 12px; color: #777; border-bottom: 1px solid #eee; }
.breadcrumb a { color: #087fbd; }
.breadcrumb-separator { margin: 0 6px; color: #bbb; }
.breadcrumb-current { color: #555; }

/* ---- movie detail ---- */
.detail-wrap { padding: 9px; }
.detail { display: flex; gap: 16px; flex-wrap: wrap; }
.detail .poster-lg { width: 220px; flex-shrink: 0; border: 1px solid #d9d9d9; border-radius: 5px; overflow: hidden; background: #eee; }
.detail .poster-lg img { width: 100%; aspect-ratio: 2/3; object-fit: cover; }
.movie-information { flex: 1; min-width: 0; }
.notice-box {
    margin: 0 0 16px; padding: 11px 12px;
    background: #fff8e5; border: 1px solid #efd58c; border-left: 4px solid #f0ad00;
    border-radius: 3px; color: #6b5929; font-size: 12px; line-height: 1.65;
}
.notice-box strong { color: #333; }
.meta { list-style: none; padding: 0; margin: 10px 0; font-size: 13px; }
.meta li { padding: 5px 0; border-bottom: 1px dashed #e6e8ea; }
.meta b { display: inline-block; min-width: 90px; color: #555; }
.q { width: 100%; border-collapse: collapse; margin-top: 0; font-size: 13px; }
.q th, .q td { text-align: left; padding: 9px 8px; border-bottom: 1px solid #e3e5e8; }
.q th { background: #f2f3f5; font-weight: 700; }
.q tr:hover td { background: #fafbfc; }

/* ---- pager ---- */
.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 18px 9px; }
.pager a, .pager span { padding: 7px 13px; border: 1px solid #e3e5e8; border-radius: 5px; font-size: 13px; color: #333; }
.pager a:hover { background: #f2f3f5; text-decoration: none; }
.pager .on { background: #1595d3; border-color: #1595d3; color: #fff; }

/* ---- seo content block ---- */
.seo-content { padding: 12px 9px 18px; color: #555; font-size: 12px; line-height: 1.7; }
.seo-content h2 { margin: 5px 0 8px; color: #333; font-size: 15px; }
.seo-content h3 { margin: 10px 0 4px; color: #006699; font-size: 14px; }
.seo-content p { margin: 7px 0; }

/* ---- footer ---- */
.footer { background: #292d31; color: #9aa0ab; padding: 20px 12px; text-align: center; font-size: 12px; border-top: 2px solid #e91e63; }
.footer a { color: #ccc; }

/* ============================================================
   RESPONSIVE — 7 / 6 / 4 / 3 / 2 / 2
   ============================================================ */
@media (max-width: 1200px) { .movie-grid { grid-template-columns: repeat(6, minmax(0,1fr)); } }
@media (max-width: 900px)  { .movie-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 650px)  {
    .movie-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; padding: 8px; }
    body { font-size: 13px; }
    .detail .poster-lg { width: 150px; }
}
@media (max-width: 500px)  {
    .movie-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .movie-title { min-height: 39px; font-size: 14px; }
    .detail .poster-lg { width: 120px; }
    .meta b { min-width: 76px; }
}
@media (max-width: 340px)  {
    .movie-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .movie-title { min-height: 35px; font-size: 12px; }
    .logo { font-size: 16px; }
}