CSS clamp

 height: clamp(280px, 23vw, 450px);

có nghĩa là chiều cao sẽ tự co giãn theo kích thước màn hình nhưng luôn nằm trong khoảng từ 280px đến 450px.

Cú pháp của clamp() là:

clamp(MIN, PREFERRED, MAX)

• 280px → Giá trị nhỏ nhất (không bao giờ thấp hơn).
• 23vw → Giá trị mong muốn (23% chiều rộng của cửa sổ trình duyệt).
• 450px → Giá trị lớn nhất (không bao giờ vượt quá).

Ví dụ

Chiều rộng màn hình	23vw	Kết quả
320px	73.6px	280px (vì nhỏ hơn min)
768px	176.6px	280px
1200px	276px	280px
1400px	322px	322px
1600px	368px	368px
2200px	506px	450px (vì vượt max)

---

Khi nào dùng?

Ví dụ cho ảnh sản phẩm:

.dmsp-image {
    height: clamp(280px, 23vw, 450px);
}

• Điện thoại → cao 280px.
• Tablet → khoảng 280–320px.
• Desktop → khoảng 320–450px.
• Màn hình siêu rộng → tối đa 450px, không bị quá cao.

---

Một số giá trị thường dùng

/* Luôn từ 250px đến 400px */
height: clamp(250px, 20vw, 400px);

/* Phù hợp card sản phẩm */
height: clamp(280px, 25vw, 420px);

/* Banner */
height: clamp(300px, 35vw, 700px);

clamp() rất hữu ích vì bạn không cần viết nhiều @media để thay đổi chiều cao theo từng kích thước màn hình.

Click More - Less HTML+JS+CSS

 

** CSS

.filter-list li:nth-child(n+11) {

    display: none;

}

.filter-list.show-all li {

    display: block !important;

}

** JS

<script type="text/javascript">

            

    $(document).on("click", ".moreless", function(e){

        e.stopPropagation();

        var parent = $(this).closest(".filter-section");

        var sublist = parent.find(".filter-list");

        var icon = $(this).find("i");

        if(sublist.hasClass("show-all")){

            sublist.removeClass("show-all");

            $(this).find("span").text("More");

            // icon xuống

            icon.removeClass("fa-angle-up").addClass("fa-angle-down");

        } else {

            sublist.addClass("show-all");

            $(this).find("span").text("Less");

            // icon lên

            icon.removeClass("fa-angle-down").addClass("fa-angle-up");

        }

    });

</script>

** HTML

echo'<div class="filter-section">

    <div class="filter-title">Danh Mục</div>

    <ul class="filter-list">';

        foreach ($data as $key => $value) {

            echo'<li>

                <a href="/'.mod_rewrite($value["title"]).'-'.$value["mid"].'-nsp">'.$value["title"].'</a>

            </li>';

        }

    echo'</ul>

    <button class="moreless toggle-btn"><span>More</span> <i class="ft-icon fa fa-angle-down"></i>

    </button>

</div>';

Icon trong select css đẹp

**** HTML

<div class="select-wrap">

    <select name="customer_shipping_phuongxa" id="customer_shipping_phuongxa">

        <option value="">Chọn Phường / Xã</option>

    </select>

</div> 

**** CSS
.appline .select-wrap{

    position:relative;

    width:100%;

}

.appline .select-wrap select{

    -webkit-appearance:none;

    -moz-appearance:none;

    appearance:none;

    background:#fff;

    border:1px solid #d9d9d9;

    box-sizing:border-box;

    border-radius:16px !important;

    height:40px !important;

    width:100%;

    padding:5px 45px 5px 20px !important;

    transition:all .2s;

    font-size:14px;

    cursor:pointer;

}

.appline .select-wrap select::-ms-expand{

    display:none;

}

.appline .select-wrap:after{

    content:"";

    position:absolute;

    top:50%;

    right:18px;

    margin-top:-2px;

    width:0;

    height:0;

    border-style:solid;

    border-width:5px 4px 0 4px;

    border-color:#888 transparent transparent transparent;

    pointer-events:none;

}

htmlspecialchars show hết lỗi dấu nháy - bird" s

$title_en="bird's nest products";

<input class="form-control" id="txt_name_en" name="txt_name_en" placeholder="Tên sản phẩm - Tiếng anh (*)" value="bird" s="" nest="" products'="" maxlength="80" required="">

và sử dụng hàm htmlspecialchars là OK.

htmlspecialchars($title_en, ENT_QUOTES)

Cloud Vision Api

 Download: Link Here

lấy giá trị form - code php ajax

 <form id="#send-supplier-fast">

<a id="tensanpham" href="'.$link.'" target="_blank" class="link">'.$title.'</a>            

<input type="text" placeholder="Số lượng"  name="soluong" oninput="this.value = this.value.replace(/[^0-9]/g, \'\')" required>

<textarea class="input-textarea" id="content" name="content" required></textarea> 

<button type="submit" id="inquirySend"></button>    

</form>

$(document).on('submit', '#send-supplier-fast', function (e) {

    e.preventDefault();

    const form = $(this);

    const btn  = $('#inquirySend');

    let formData = new FormData();

    // lấy data thường

    formData.append('soluong', $('input[name=soluong]').val());

    formData.append('donvitinh', $('select[name=donvitinh]').val());

    formData.append('content', $('#content').val());

    formData.append('senderMail', $('#senderMail').val());

    formData.append('pid', $('input[name=pid]').val());

    // formData.append('title', $('input[name=title]').val());

    formData.append('title', $('#tensanpham').text().trim());

    formData.append('userid', $('input[name=userid]').val());

    // chỉ append file từ selectedFiles

    selectedFiles.forEach(function(file) {

        if (file && file.size > 0) {

            formData.append('files[]', file);

        }

    });

    btn.prop('disabled', true).text('Đang gửi...');

    $.ajax({

        url: '/send-supplier-product',

        type: 'POST',

        data: formData,

        processData: false,

        contentType: false,

        dataType: 'json',

        success: function (res) {

            // console.log(res);

            if (res && res.status === 'success') {

                showNotify('✅ Gửi yêu cầu thành công!');

                form[0].reset();            

                window.location.href = '/?sendmail=' + res.mail_data.mail_id+ '&token=' + res.mail_data.token;

            } else {

                showNotify('❌ ' + (res.message || 'Có lỗi xảy ra'), 'error');

            }

        },

        error: function () {

            showNotify('❌ Lỗi server', 'error');

        },

        complete: function () {

            btn.prop('disabled', false).text('Gửi yêu cầu');

        }

    });

});

Chỉ cho nhập số vào - code php

 <input type="text" name="khoahoc" class="form-control" oninput="this.value = this.value.replace(/[^0-9]/g, \'\')" required>