/* ==========================================================================
   PNNN — Mobile Layout (enqueue sau 'style' để override)
   Toàn bộ rule nằm trong @media (max-width:767px) → KHÔNG ảnh hưởng desktop.
   Tông eva.vn: nền trắng, chữ đen, accent hồng tiết chế. Tránh min()/CSS quá mới.
   Tài liệu: DOCS/pnnn mobile layout/ ; report: DOCS/tasks/TASK_20260603_MOBILE_LAYOUT_REDESIGN.md
   ========================================================================== */

:root{
  --pm-ink:#15181c;      /* tiêu đề / chữ chính */
  --pm-ink-2:#4b5158;    /* chữ phụ */
  --pm-meta:#8a9097;     /* meta */
  --pm-line:#ececec;     /* đường kẻ */
  --pm-accent:#e5346f;   /* hồng nhấn */
  --pm-accent-sf:#fdeaf1;/* hồng nhạt */
  --pm-radius:8px;
  --pm-radius-sm:5px;
  --pm-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Open Sans",Arial,sans-serif;
}

@media (max-width:767px){

  /* ===== M1 — Nền & chống horizontal scroll ============================= */
  #main{overflow-x:hidden;}
  .container{padding-left:14px;padding-right:14px;max-width:100%;}
  img{max-width:100%;height:auto;}

  /* Header mobile gọn hơn, tránh cảm giác vẫn y nguyên theme cũ */
  .logo-banner .info-head{display:none!important;}
  .wrapper-main-menu{background:#fff!important;border-bottom:1px solid var(--pm-line);}
  #site-navigation.main-navigation{
    min-height:56px;display:flex!important;align-items:center;justify-content:space-between;
    padding:0;background:#fff!important;
  }
  #site-navigation .navbar-toggle{
    position:static!important;float:none!important;margin:0!important;width:48px;height:56px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;border:0!important;
    background:transparent!important;
  }
  #site-navigation .navbar-toggle .icon-bar{width:22px;height:2px;background:var(--pm-ink)!important;margin:3px 0;border-radius:2px;}
  #site-navigation .logo2{flex:1;text-align:center;line-height:0;}
  #site-navigation .logo2 img{max-height:36px;width:auto;margin:0 auto;}
  #site-navigation #reload{
    width:48px;height:56px;display:flex;align-items:center;justify-content:center;
    color:var(--pm-accent)!important;border-left:1px solid var(--pm-line);
  }

  /* Nội dung bài: ảnh/iframe/table/video không tràn ngang */
  .entry-content img,
  .entry-content iframe,
  .entry-content video,
  .entry-content embed,
  .entry-content object{max-width:100%!important;height:auto;}
  .entry-content iframe{width:100%!important;}
  .entry-content table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}

  /* ===== M2c — Typography single (dễ đọc) ============================== */
  .cat-links{
    position:relative;display:block;background:transparent!important;border:0!important;
    padding:0 0 0 12px!important;margin:14px 0 14px!important;
    font-size:24px!important;line-height:1.25!important;color:var(--pm-ink)!important;font-weight:800;
    text-transform:uppercase;letter-spacing:.01em;
  }
  .cat-links::before{
    content:"";position:absolute;left:0;top:.14em;width:4px;height:1.05em;
    border-radius:2px;background:var(--pm-accent);
  }
  .entry-content{font-size:16px;line-height:1.72;color:var(--pm-ink);}
  .entry-content p{margin:0 0 16px;font-size:16px;line-height:1.72;}
  .entry-content h2,
  .entry-content h3,
  .entry-content h4{font-size:18px!important;line-height:1.4!important;margin:22px 0 10px!important;color:var(--pm-ink);}
  .entry-content ul,
  .entry-content ol{padding-left:22px;}
  .entry-content a{color:var(--pm-accent);}

  /* Thanh ngày + share: xuống hàng gọn, nút dễ chạm */
  #date_share.shareheard{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:8px 0;}
  #date_share .date{font-size:12px;color:var(--pm-meta);line-height:1.5;}
  #block_share{display:flex;gap:8px;margin-left:auto;}
  #block_share a{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;font-size:17px;}

  /* ===== Section heading kiểu eva (accent bar) ========================= */
  /* Áp cho heading chuyên mục trên home + tiêu đề khối */
  .item-cate .title_active h2,
  .post-related .subcat-2 span,
  .cate-quick-read .subcat-2 span{
    position:relative;font-weight:800;text-transform:uppercase;color:var(--pm-ink);
    letter-spacing:.01em;
  }
  .item-cate .title_active h2{font-size:18px;padding-left:12px;line-height:1.2;}
  .item-cate .title_active h2::before{
    content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:4px;height:18px;border-radius:2px;background:var(--pm-accent);
  }
  .item-cate .title_active h2 a{color:inherit;}

  /* ===== M2a — Category/archive: list ảnh trái – chữ phải ============== */
  /* item lớn (money post) → lead: ảnh trên, tiêu đề dưới */
  .list_category .item-big{width:100%!important;float:none!important;margin:0 0 6px!important;padding:0!important;}
  .list_category .item-big img{width:100%!important;height:auto!important;border-radius:var(--pm-radius);margin:0 0 8px!important;}
  .list_category .item-big h2{font-size:19px;line-height:1.3;margin:0 0 6px;font-weight:800;}
  .list_category .item-big p{font-size:13.5px;color:var(--pm-ink-2);line-height:1.5;margin:0;}

  /* item nhỏ (money post) → hàng ảnh trái */
  .feature-posts-cate li.item-small{width:100%!important;float:none!important;display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--pm-line);}
  .feature-posts-cate li.item-small > a{flex:0 0 104px;width:104px;display:block;overflow:hidden;border-radius:var(--pm-radius-sm);margin:0;}
  .feature-posts-cate li.item-small > a img{width:104px!important;height:70px!important;object-fit:cover;display:block;margin:0!important;float:none!important;}
  .feature-posts-cate li.item-small h2{margin:0;font-size:15px;line-height:1.32;font-weight:700;}

  /* list bài chính của category (ul không class) → ảnh trái, tiêu đề phải */
  .list_category > ul:not(.feature-posts-cate){float:none;width:100%;}
  .list_category > ul:not(.feature-posts-cate) > li{
    position:relative;list-style:none;float:none!important;width:100%!important;
    min-height:84px;padding:14px 0 14px 132px;margin:0;border-top:1px solid var(--pm-line);
  }
  .list_category > ul:not(.feature-posts-cate) > li:first-child{border-top:0;}
  .list_category > ul:not(.feature-posts-cate) > li > a{
    position:absolute;left:0;top:14px;width:116px;height:78px;
    overflow:hidden;border-radius:var(--pm-radius-sm);margin:0;display:block;
  }
  .list_category > ul:not(.feature-posts-cate) > li > a img{
    width:116px!important;height:78px!important;object-fit:cover;display:block;margin:0!important;float:none!important;
  }
  .list_category > ul:not(.feature-posts-cate) > li h2,
  .list_category > ul:not(.feature-posts-cate) > li h3{margin:0;font-size:16px;line-height:1.3;font-weight:700;}
  .list_category > ul:not(.feature-posts-cate) > li h2 a,
  .list_category > ul:not(.feature-posts-cate) > li h3 a{color:var(--pm-ink);}
  /* Ẩn meta/excerpt/related trong list cho gọn (vẫn còn trong DOM) */
  .list_category > ul:not(.feature-posts-cate) > li .com_share,
  .list_category > ul:not(.feature-posts-cate) > li .info-post,
  .list_category > ul:not(.feature-posts-cate) > li .dong-su-kien{display:none;}
  .list_category > ul:not(.feature-posts-cate) > li.no-thumb{min-height:0;padding-left:0;}
  .list_category > ul:not(.feature-posts-cate) > li.no-thumb > a{display:none;}
  .list_category > ul:not(.feature-posts-cate) > li.no-thumb h2,
  .list_category > ul:not(.feature-posts-cate) > li.no-thumb h3{font-size:17px;line-height:1.35;}

  /* ===== M2b — Home ==================================================== */
  /* Hero: lead ảnh trên + tiêu đề, side dưới dạng grid 2 cột */
  .news-featured-card--single .thumb{display:block;margin:0 0 10px;border-radius:var(--pm-radius);overflow:hidden;background:#f2f2f2;}
  .news-featured-card--single .thumb img{width:100%!important;height:auto!important;display:block;}
  .news-featured-card--single .news-featured-title{font-size:20px;line-height:1.3;}
  .news-side-grid{display:grid!important;grid-template-columns:1fr 1fr;gap:14px 10px;margin:12px 0 0!important;}
  .news-side-grid > .news-side-card{width:auto!important;min-height:0!important;margin:0!important;padding:0!important;}
  .news-side-grid > .news-side-card .thumb{display:block;border-radius:var(--pm-radius-sm);overflow:hidden;background:#f2f2f2;}
  .news-side-grid > .news-side-card .thumb img{width:100%!important;aspect-ratio:4/3;object-fit:cover;}
  .news-side-grid > .news-side-card .news-side-title{font-size:14px;line-height:1.35;margin-top:8px;}
  .news-side-grid > .news-side-card .news-side-excerpt{display:none;}

  /* Khối chuyên mục: list bài → ảnh trái chữ phải (li thường), li đầu = lead */
  .list-posts-2 ul li{width:100%!important;float:none!important;margin:0!important;padding:12px 0;border-top:1px solid var(--pm-line);}
  .list-posts-2 ul li:first-child{border-top:0;padding-top:4px;}
  .list-posts-2 ul li a.bold{display:flex;gap:12px;align-items:flex-start;color:var(--pm-ink);font-size:15px;line-height:1.32;font-weight:700;}
  .list-posts-2 ul li a.bold img{flex:0 0 116px;width:116px!important;height:78px!important;object-fit:cover;margin:0!important;float:none!important;border-radius:var(--pm-radius-sm);}
  .list-posts-2 ul li:first-child a.bold{display:block;font-size:18px;line-height:1.3;font-weight:800;}
  .list-posts-2 ul li:first-child a.bold img{width:100%!important;height:auto!important;margin:0 0 8px!important;border-radius:var(--pm-radius);}
  .list-posts-2 ul li p{font-size:13.5px;color:var(--pm-ink-2);line-height:1.5;margin:6px 0 0;}
  .list-posts-2 ul li:not(:first-child) p{display:none;}

  /* Bottom home → lưới 2 cột "Tin hay đừng bỏ lỡ" */
  .bottom-home-news-grid{display:grid!important;grid-template-columns:1fr 1fr;gap:18px 12px;padding:14px 0 4px;}
  .bottom-home-news-grid:before,
  .bottom-home-news-grid:after{display:none!important;}
  .bottom-home-news-grid > .bottom-home-news-card{width:auto!important;float:none!important;margin:0!important;padding:0!important;}
  .bottom-home-news-grid .bottom-home-news-title{font-size:15px;line-height:1.32;margin-top:8px;}

  /* ===== M2c — Single: related posts → lưới 2 cột ===================== */
  .post-related .related-posts .row{display:grid!important;grid-template-columns:1fr 1fr;gap:18px 12px;}
  .post-related .related-posts .row:before,
  .post-related .related-posts .row:after{display:none!important;}
  .post-related .related-post-item{width:auto!important;float:none!important;margin:0!important;padding:0!important;}
  .post-related .related-post-item a,
  .post-related .related-post-item img{float:none!important;width:100%!important;}
  .post-related .related-post-thumb{overflow:hidden;border-radius:var(--pm-radius-sm);background:#f3f3f3;}
  .post-related .related-post-thumb img{height:auto!important;object-fit:cover;}
  .post-related .related-post-title{font-size:14.5px;line-height:1.32;margin-top:8px;}
  .post-related .related-post-title a{color:var(--pm-ink);}

  /* ===== M2d — Footer gọn, không tràn, dễ chạm ======================== */
  .wrapper-footer{float:none;width:100%;}
  #footer .box_footer{padding:16px 14px;}
  #footer .box_footer h4{font-size:16px;margin-bottom:10px;}
  #footer .box_footer ul{padding-left:18px!important;}
  #footer .box_footer li{margin-bottom:4px;line-height:1.45;}
  #footer .box_footer a{display:inline-block;padding:3px 0;}
  #footer img{max-width:100%;height:auto;}

  /* ===================================================================== */
  /* POLISH 2026-06-04 (brief BRIEF_CLAUDE_FIX_MOBILE_LAYOUT_POLISH)        */
  /* Override theo source-order (cùng selector → dòng sau thắng).           */
  /* ===================================================================== */

  /* (#4) Ẩn dải logo/banner rỗng đầu trang + ticker + breadcrumb rỗng ---- */
  /* Mobile đã có thanh điều hướng riêng (#site-navigation) làm header.     */
  .logo-banner{display:none!important;}
  .post-update{display:none!important;}            /* ticker "Mới cập nhật" (vốn hidden-xs) */
  .breadcrumb{margin:10px 0 4px;font-size:12px;}
  .breadcrumb:empty{display:none!important;}
  .breadcrumb #breadcrumbs:empty{display:none!important;}

  /* (#2 + #1) Typography to & rõ hơn + spacing đều ----------------------- */

  /* Hero home (lead lớn) — aspect-ratio đặt ở container .thumb để ảnh fill đều */
  .news-featured-card--single .thumb{aspect-ratio:16/9!important;margin:0 0 11px;border-radius:var(--pm-radius);overflow:hidden;}
  .news-featured-card--single .thumb img{width:100%!important;height:100%!important;object-fit:cover;}
  .news-featured-card--single .news-featured-title{font-size:21px!important;line-height:1.28!important;font-weight:800;margin:0;}

  /* Category lead (item-big) */
  .list_category .item-big h2{font-size:20px;line-height:1.3;font-weight:800;}
  .list_category .item-big img{aspect-ratio:16/9;object-fit:cover;}
  .list_category .item-big p{font-size:14px;color:var(--pm-ink-2);line-height:1.55;}

  /* List ảnh trái – chữ phải (category/archive/search) */
  .list_category > ul:not(.feature-posts-cate) > li{min-height:88px;padding:14px 0 14px 136px;}
  .list_category > ul:not(.feature-posts-cate) > li.no-thumb{padding-left:0;min-height:0;}
  .list_category > ul:not(.feature-posts-cate) > li > a{width:120px;height:80px;top:14px;}
  .list_category > ul:not(.feature-posts-cate) > li > a img{width:120px!important;height:80px!important;}
  .list_category > ul:not(.feature-posts-cate) > li h2,
  .list_category > ul:not(.feature-posts-cate) > li h3{font-size:17px;line-height:1.36;font-weight:700;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  .list_category > ul:not(.feature-posts-cate) > li.no-thumb h2,
  .list_category > ul:not(.feature-posts-cate) > li.no-thumb h3{font-size:17.5px;-webkit-line-clamp:4;}

  /* Money post nhỏ (item-small) */
  .feature-posts-cate li.item-small > a{flex:0 0 112px;width:112px;}
  .feature-posts-cate li.item-small > a img{width:112px!important;height:75px!important;}
  .feature-posts-cate li.item-small h2{font-size:16.5px;line-height:1.34;}

  /* Khối chuyên mục home: list ảnh trái – chữ phải + lead */
  .list-posts-2 ul li{padding:14px 0;}
  .list-posts-2 ul li a.bold{font-size:16.5px;line-height:1.36;gap:13px;}
  .list-posts-2 ul li a.bold img{flex:0 0 120px;width:120px!important;height:80px!important;}
  .list-posts-2 ul li:first-child a.bold{font-size:20px;line-height:1.3;font-weight:800;}
  .list-posts-2 ul li:first-child a.bold img{width:100%!important;height:auto!important;aspect-ratio:16/9;object-fit:cover;margin:0 0 9px!important;}

  /* Hero side grid (2 cột) */
  .news-side-grid{gap:16px 10px;}
  .news-side-grid > .news-side-card .thumb{aspect-ratio:16/9!important;overflow:hidden;border-radius:var(--pm-radius-sm);}
  .news-side-grid > .news-side-card .thumb img{width:100%!important;height:100%!important;aspect-ratio:auto;object-fit:cover;}
  .news-side-grid > .news-side-card .news-side-title{font-size:15.5px;line-height:1.36;margin-top:9px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

  /* Bottom home grid (2 cột) */
  .bottom-home-news-grid{gap:20px 12px;}
  .bottom-home-news-grid .bottom-home-news-thumb{aspect-ratio:16/9;border-radius:var(--pm-radius-sm);overflow:hidden;}
  .bottom-home-news-grid .bottom-home-news-title{font-size:16px;line-height:1.36;margin-top:9px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

  /* Related posts (single, 2 cột) */
  .post-related .related-posts .row{gap:20px 12px;}
  .post-related .related-post-thumb{aspect-ratio:16/9;}
  .post-related .related-post-thumb img{width:100%!important;height:100%!important;object-fit:cover;}
  .post-related .related-post-title{font-size:15.5px;line-height:1.36;margin-top:9px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

  /* Single body: thoáng & rõ hơn */
  .entry-content{font-size:16.5px;line-height:1.75;}
  .entry-content p{font-size:16.5px;line-height:1.75;margin:0 0 17px;}

  /* Heading khối: to hơn chút cho dễ scan */
  .item-cate .title_active h2{font-size:19px;}
  .post-related .subcat-2 span{font-size:17px;}

}