<link href=”https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap” rel=”stylesheet”>

<style>
.dkgh-wrapper {
font-family: ‘Be Vietnam Pro’, sans-serif;
max-width: 1200px;
margin: 40px auto;
padding: 0 16px;
}

.dkgh-title {
font-size: 22px;
font-weight: 800;
color: #1a1a1a;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
}

.dkgh-title-bar {
width: 60px;
height: 3px;
background: #f47f20;
border-radius: 2px;
margin-bottom: 28px;
}

.dkgh-card {
background: #f4f4f4;
border-radius: 10px;
padding: 36px 40px 40px;
}

.dkgh-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px 32px;
}

.dkgh-field {
display: flex;
flex-direction: column;
gap: 7px;
}

.dkgh-field.full {
grid-column: 1 / -1;
}

.dkgh-label {
font-size: 13.5px;
font-weight: 600;
color: #333;
}

.dkgh-label .req {
color: #e53935;
margin-left: 3px;
}

.dkgh-input,
.dkgh-textarea {
width: 100%;
padding: 10px 14px;
border: 1.5px solid #ddd;
border-radius: 5px;
font-family: ‘Be Vietnam Pro’, sans-serif;
font-size: 14px;
color: #222;
background: #fff;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
box-sizing: border-box;
}

.dkgh-input:focus,
.dkgh-textarea:focus {
border-color: #f47f20;
box-shadow: 0 0 0 3px rgba(244,127,32,0.12);
}

.dkgh-textarea {
resize: vertical;
min-height: 110px;
}

.dkgh-submit-wrap {
text-align: center;
margin-top: 28px;
}

.dkgh-btn {
background: #f47f20;
color: #fff;
border: none;
padding: 13px 44px;
font-family: ‘Be Vietnam Pro’, sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 5px;
cursor: pointer;
transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
box-shadow: 0 3px 12px rgba(244,127,32,0.3);
}

.dkgh-btn:hover {
background: #e06c10;
box-shadow: 0 5px 18px rgba(244,127,32,0.4);
transform: translateY(-1px);
}

.dkgh-btn:active {
transform: translateY(0);
}

/* Thông báo thành công */
.dkgh-success {
display: none;
background: #e8f5e9;
border: 1.5px solid #66bb6a;
border-radius: 6px;
color: #2e7d32;
font-size: 14px;
font-weight: 600;
padding: 14px 20px;
margin-top: 20px;
text-align: center;
}

@media (max-width: 640px) {
.dkgh-grid {
grid-template-columns: 1fr;
}
.dkgh-field.full {
grid-column: 1;
}
.dkgh-card {
padding: 24px 18px 28px;
}
}
</style>

<div class=”dkgh-wrapper”>
<div class=”dkgh-title”>Đăng ký gian hàng</div>
<div class=”dkgh-title-bar”></div>

<div class=”dkgh-card”>
<div class=”dkgh-grid” id=”dkghForm”>

<div class=”dkgh-field”>
<label class=”dkgh-label”>Tên doanh nghiệp <span class=”req”>*</span></label>
<input class=”dkgh-input” type=”text” id=”dkgh_ten_dn” placeholder=”” />
</div>

<div class=”dkgh-field”>
<label class=”dkgh-label”>Địa chỉ <span class=”req”>*</span></label>
<input class=”dkgh-input” type=”text” id=”dkgh_dia_chi” placeholder=”” />
</div>

<div class=”dkgh-field”>
<label class=”dkgh-label”>Điện thoại <span class=”req”>*</span></label>
<input class=”dkgh-input” type=”tel” id=”dkgh_dien_thoai” placeholder=”” />
</div>

<div class=”dkgh-field”>
<label class=”dkgh-label”>Di động <span class=”req”>*</span></label>
<input class=”dkgh-input” type=”tel” id=”dkgh_di_dong” placeholder=”” />
</div>

<div class=”dkgh-field”>
<label class=”dkgh-label”>Email <span class=”req”>*</span></label>
<input class=”dkgh-input” type=”email” id=”dkgh_email” placeholder=”” />
</div>

<div class=”dkgh-field”>
<label class=”dkgh-label”>Website</label>
<input class=”dkgh-input” type=”url” id=”dkgh_website” placeholder=”” />
</div>

<div class=”dkgh-field”>
<label class=”dkgh-label”>Người đại diện</label>
<input class=”dkgh-input” type=”text” id=”dkgh_nguoi_dd” placeholder=”” />
</div>

<div class=”dkgh-field”>
<label class=”dkgh-label”>Chức vụ</label>
<input class=”dkgh-input” type=”text” id=”dkgh_chuc_vu” placeholder=”” />
</div>

<div class=”dkgh-field”>
<label class=”dkgh-label”>Loại hình công ty</label>
<input class=”dkgh-input” type=”text” id=”dkgh_loai_hinh” placeholder=”” />
</div>

<div class=”dkgh-field”>
<label class=”dkgh-label”>Quốc gia <span class=”req”>*</span></label>
<input class=”dkgh-input” type=”text” id=”dkgh_quoc_gia” placeholder=”” />
</div>

<div class=”dkgh-field full”>
<label class=”dkgh-label”>Số người đăng ký</label>
<input class=”dkgh-input” type=”number” id=”dkgh_so_nguoi” placeholder=”” min=”1″ />
</div>

<div class=”dkgh-field full”>
<label class=”dkgh-label”>Mặt hàng quan tâm</label>
<textarea class=”dkgh-textarea” id=”dkgh_mat_hang” placeholder=””></textarea>
</div>

</div>

<div class=”dkgh-submit-wrap”>
<button class=”dkgh-btn” onclick=”dkghSubmit()”>Đăng ký ngay</button>
</div>

<div class=”dkgh-success” id=”dkghSuccess”>
✅ Đăng ký thành công! Chúng tôi sẽ liên hệ với bạn trong thời gian sớm nhất.
</div>
</div>
</div>

<script>
function dkghSubmit() {
var required = [
{ id: ‘dkgh_ten_dn’, label: ‘Tên doanh nghiệp’ },
{ id: ‘dkgh_dia_chi’, label: ‘Địa chỉ’ },
{ id: ‘dkgh_dien_thoai’, label: ‘Điện thoại’ },
{ id: ‘dkgh_di_dong’, label: ‘Di động’ },
{ id: ‘dkgh_email’, label: ‘Email’ },
{ id: ‘dkgh_quoc_gia’, label: ‘Quốc gia’ }
];

var valid = true;

// Xoá lỗi cũ
document.querySelectorAll(‘.dkgh-input, .dkgh-textarea’).forEach(function(el) {
el.style.borderColor = ‘#ddd’;
});

for (var i = 0; i < required.length; i++) {
var el = document.getElementById(required[i].id);
if (!el.value.trim()) {
el.style.borderColor = ‘#e53935’;
if (valid) el.focus();
valid = false;
}
}

// Kiểm tra email
var emailEl = document.getElementById(‘dkgh_email’);
if (emailEl.value.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailEl.value.trim())) {
emailEl.style.borderColor = ‘#e53935’;
valid = false;
alert(‘Vui lòng nhập đúng định dạng email.’);
emailEl.focus();
return;
}

if (!valid) {
alert(‘Vui lòng điền đầy đủ các trường bắt buộc (*).’);
return;
}

// Gửi dữ liệu qua mailto (hoặc anh có thể thay bằng AJAX / plugin Contact Form)
var body = encodeURIComponent(
‘Tên doanh nghiệp: ‘ + document.getElementById(‘dkgh_ten_dn’).value + ‘\n’ +
‘Địa chỉ: ‘ + document.getElementById(‘dkgh_dia_chi’).value + ‘\n’ +
‘Điện thoại: ‘ + document.getElementById(‘dkgh_dien_thoai’).value + ‘\n’ +
‘Di động: ‘ + document.getElementById(‘dkgh_di_dong’).value + ‘\n’ +
‘Email: ‘ + document.getElementById(‘dkgh_email’).value + ‘\n’ +
‘Website: ‘ + document.getElementById(‘dkgh_website’).value + ‘\n’ +
‘Người đại diện: ‘ + document.getElementById(‘dkgh_nguoi_dd’).value + ‘\n’ +
‘Chức vụ: ‘ + document.getElementById(‘dkgh_chuc_vu’).value + ‘\n’ +
‘Loại hình công ty: ‘ + document.getElementById(‘dkgh_loai_hinh’).value + ‘\n’ +
‘Quốc gia: ‘ + document.getElementById(‘dkgh_quoc_gia’).value + ‘\n’ +
‘Số người đăng ký: ‘ + document.getElementById(‘dkgh_so_nguoi’).value + ‘\n’ +
‘Mặt hàng quan tâm: ‘ + document.getElementById(‘dkgh_mat_hang’).value
);

// *** Thay YOUR_EMAIL@domain.com bằng email nhận đơn đăng ký ***
window.location.href = ‘mailto:lotrungtienltt@gmail.com?subject=Đăng%20ký%20gian%20hàng&body=’ + body;

// Hiện thông báo thành công
document.getElementById(‘dkghSuccess’).style.display = ‘block’;

// Reset form
document.getElementById(‘dkghForm’).querySelectorAll(‘input, textarea’).forEach(function(el) {
el.value = ”;
});
}
</script>