/* ============================================================================
   STEP 49 / STEP 12 — QUẢNG CÁO THÔNG MINH CHÈN TRONG NỘI DUNG BÀI VIẾT
   ============================================================================

   HTML THẬT mà ai_ads/renderer.py::build_ad_html() sinh ra (đã đối chiếu,
   không phải phỏng đoán):

       <!-- SMART AD -->
       <div class="smart-ad smart-ad-in-content" data-ad-id="72">
         <a href="..." target="_blank" rel="noopener">          ← chỉ khi có link
           <img src="..." alt="..." width="300" height="250"
                loading="lazy" class="smart-ad-image">
         </a>
       </div>

   Không có phần tử con nào khác. Mọi selector dưới đây đều khớp đúng cấu
   trúc này — không viết CSS cho class không tồn tại.

   ── PHẠM VI ────────────────────────────────────────────────────────────
   MỌI quy tắc đều bắt đầu bằng .smart-ad. Tuyệt đối không có selector toàn
   cục (img, p, table) và không có .bv-body img, .bv-sidebar, .ads, .promo-*.

   Vì vậy file này KHÔNG THỂ ảnh hưởng tới:
     · ảnh trong nội dung bài viết  (.bv-body img — giữ nguyên style.css)
     · quảng cáo cột phải           (partials/sidebar_promo.html)
     · quảng cáo trang chủ
     · QC Mobile xen giữa sections  (.mobile-section-ad — mobile.css)
     · bảng biểu, blockquote, danh sách trong bài

   ── VÌ SAO width/height CỦA THẺ <img> VẪN CẦN CSS ─────────────────────
   Renderer in ra width="300" height="250" lấy từ Ad.image_width/height.
   Hai thuộc tính đó rất có ích: trình duyệt biết trước tỉ lệ khung hình nên
   không bị nhảy layout khi ảnh tải xong. Nhưng nếu để nguyên, ảnh sẽ luôn
   rộng đúng 300px kể cả trên màn hình 360px có padding — và tệ hơn, ảnh
   728x90 sẽ tràn ngang.

   Cách xử lý chuẩn: giữ nguyên thuộc tính HTML (để có tỉ lệ), rồi ghi đè
   bằng max-width:100% + height:auto. Trình duyệt tự suy ra chiều cao theo
   tỉ lệ gốc -> KHÔNG BAO GIỜ méo ảnh, và không bao giờ tràn khung.
   Nhờ vậy cũng không cần hard-code một chiều rộng duy nhất cho mọi quảng
   cáo: banner 728x90 và box 300x250 đều hiển thị đúng tỉ lệ của mình.
   ============================================================================ */

/* ── Khối bao ────────────────────────────────────────────────────────────
   `clear:both` phòng trường hợp đoạn văn phía trên có ảnh float — không để
   quảng cáo bị hút lên cạnh chữ.
   `max-width:100%` + `box-sizing` chặn mọi khả năng tràn ngang.            */
.smart-ad {
    display: block;
    clear: both;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 26px auto;
    padding: 0;
    text-align: center;
    line-height: 0;          /* bỏ khoảng trắng thừa dưới ảnh inline */
    overflow: hidden;        /* lưới an toàn cuối cùng chống tràn ngang */
}

/* Thẻ <a> chỉ có mặt khi quảng cáo có link. Phải là inline-block để nó ôm
   sát ảnh, nếu không vùng bấm sẽ trải rộng cả dòng.                        */
.smart-ad > a {
    display: inline-block;
    max-width: 100%;
    line-height: 0;
    text-decoration: none;
    border: 0;
}

/* ── Ảnh quảng cáo ───────────────────────────────────────────────────────
   `height:auto` là mấu chốt giữ đúng tỉ lệ khung hình khi chiều rộng bị
   thu lại. `width:auto` để ảnh nhỏ hơn container không bị kéo giãn mờ.     */
.smart-ad .smart-ad-image {
    display: block;
    height: auto;            /* MẤU CHỐT giữ tỉ lệ khung hình */
    max-width: 100%;         /* không bao giờ vượt cột nội dung */
    margin: 0 auto;
    border-radius: 8px;      /* khớp .bv-body img trong style.css */
    object-fit: contain;
}

/* ── STEP 18: KÍCH THƯỚC HIỂN THỊ CỦA QUẢNG CÁO TRONG BÀI ────────────────
   LỖI ĐÃ SỬA: trước đây dùng `width: auto`. Với `width:auto`, trình duyệt
   BỎ QUA thuộc tính width="300" trong HTML và vẽ ảnh theo KÍCH THƯỚC GỐC
   CỦA TỆP. Ảnh nào có tệp nhỏ hơn 300px sẽ hiện bé hơn mong muốn trên PC —
   đúng hiện tượng đang gặp. `max-width: 336px` cũng không cứu được, vì nó
   chỉ đặt trần chứ không đặt sàn.

   Cách sửa: chỉ định chiều rộng tường minh.
     width: 300px            → dòng dự phòng cho trình duyệt cũ
     width: min(300px, 100%) → 300px khi còn chỗ, co lại khi container hẹp

   Vì sao 300px: vị trí 6 được `ad_position_config` quy định là 300x250.
   Đây là kích thước quy ước của CHÍNH vị trí đó, không phải số tùy chọn.

   `height: auto` ở quy tắc trên bảo đảm chiều cao luôn suy ra theo tỉ lệ
   gốc → ảnh KHÔNG BAO GIỜ bị méo, kể cả khi tệp không đúng 300x250.
   Ảnh 728x90 đặt nhầm vào vị trí 6 sẽ co xuống 300px chiều rộng và cao
   khoảng 37px — đúng tỉ lệ, không vỡ khung.                              */
.smart-ad-in-content .smart-ad-image {
    width: 600px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* ── TASK 1: TIÊU ĐỀ QUẢNG CÁO (tên quảng cáo) ──────────────────────────
   HTML THẬT do renderer sinh ra khi quảng cáo có tên:

       <div class="smart-ad smart-ad-in-content" data-ad-id="72">
         <a href="..." target="_blank" rel="noopener">
           <img class="smart-ad-image" ...>
           <div class="smart-ad-title">Khách sạn Park Hyatt Saigon</div>
         </a>
       </div>

   Tiêu đề là phần tử RIÊNG bên dưới ảnh, KHÔNG vẽ chữ lên ảnh: chữ luôn
   sắc nét, tự xuống dòng theo bề rộng màn hình, đọc được bằng trình đọc
   màn hình, và không cần sửa file ảnh.

   `.smart-ad` đặt `line-height: 0` để bỏ khoảng trắng dưới ảnh inline —
   nên tiêu đề PHẢI tự đặt lại `line-height`, nếu không chữ sẽ chồng lên
   nhau. Đây là lý do có dòng `line-height: 1.45` bên dưới.

   Bề rộng bị giới hạn bằng đúng bề rộng ảnh (600px ở desktop) để dòng chữ
   không trải rộng hơn khối quảng cáo.                                     */
.smart-ad .smart-ad-title {
    display: block;
    box-sizing: border-box;
    width: 600px;
    max-width: 100%;
    margin: 8px auto 0;
    padding: 0 4px;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;       /* BẮT BUỘC: .smart-ad đặt line-height:0 */
    text-align: center;
    color: #202124;
    word-wrap: break-word;   /* tên dài không tràn ngang */
    overflow-wrap: break-word;
}

/* Khi có link, tiêu đề nằm trong thẻ <a> -> phải tự bỏ gạch chân và đặt
   lại màu, vì `.smart-ad > a` chỉ đặt cho chính thẻ <a>.                   */
.smart-ad > a .smart-ad-title {
    color: #202124;
    text-decoration: none;
}

.smart-ad > a:hover .smart-ad-title,
.smart-ad > a:focus .smart-ad-title {
    text-decoration: underline;
}

/* Nhãn "Quảng cáo" — dựng bằng ::before nên KHÔNG phải sửa renderer.
   Người đọc phân biệt được đâu là nội dung, đâu là quảng cáo.              */
.smart-ad::before {
    content: "Quảng cáo";
    display: block;
    margin: 0 auto 6px;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.4;
    color: #9aa0a6;
}

/* ── Máy tính bàn ───────────────────────────────────────────────────────
   STEP 18: quy tắc `max-width: 336px` cũ đã được GỠ BỎ. Nó chỉ đặt TRẦN
   nên không ngăn được ảnh bị vẽ nhỏ hơn 300px, mà lại là một con số thứ
   hai gây nhầm lẫn. Chiều rộng nay do `width: min(300px, 100%)` ở trên
   quyết định — trên màn hình 1366px và 1440px, cột nội dung luôn rộng hơn
   300px nên ảnh hiển thị đúng 300px.                                      */

/* ── Di động ────────────────────────────────────────────────────────────
   Bỏ trần 336px để ảnh dùng trọn chiều rộng cột nội dung, nhưng vẫn không
   bao giờ vượt quá container. Đã kiểm ở 375 / 390 / 412px.                 */
@media (max-width: 767px) {
    .smart-ad {
        margin: 20px auto;
    }
    /* `width: min(300px, 100%)` ở quy tắc chung đã lo phần co giãn:
       màn hình 375/390/412px có cột nội dung rộng hơn 300px nên quảng cáo
       vẫn hiện 300px; container hẹp hơn thì tự co về 100%. Không bao giờ
       tràn ngang. Hành vi mobile GIỮ NGUYÊN như trước Step 18.            */
    .smart-ad .smart-ad-image {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .smart-ad::before {
        font-size: 10px;
        margin-bottom: 5px;
    }

    /* TASK 1 — tiêu đề trên di động: bỏ trần 600px để dùng trọn bề rộng
       cột nội dung, chữ nhỏ lại một chút cho cân với ảnh đã co.           */
    .smart-ad .smart-ad-title {
        width: 100%;
        max-width: 100%;
        margin-top: 7px;
        font-size: 14px;
        line-height: 1.4;
    }
}

/* ── Tôn trọng lựa chọn giảm chuyển động ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .smart-ad,
    .smart-ad .smart-ad-image {
        transition: none;
        animation: none;
    }
}