Chèn nút copy mã giảm giá không tự động mở link affiliate

// NUT COPY MA GIAM GIA KHONG TU DONG MO LINK - SCALE 120% + CANH GIỮA
function coupon_shortcode($atts) {
$atts = shortcode_atts(array(
'code' => 'MAGIAMGIA20',
'url' => 'https://your-affiliate-link.com'
), $atts);

$unique_id = uniqid('coupon_');

$output = '
<div class="coupon-box">
<div class="coupon-code-wrap">
<div class="coupon-input-container">
<input type="text" id="' . esc_attr($unique_id) . '_code" class="coupon-code" value="' . esc_attr($atts['code']) . '" readonly>
<button type="button" class="copy-btn" onclick="copyCoupon(\'' . esc_attr($unique_id) . '\')">Copy Mã</button>
</div>
</div>
<button type="button" class="open-link" onclick="openAffiliateLink(\'' . esc_url($atts['url']) . '\')">Xem nguồn</button>
<p id="' . esc_attr($unique_id) . '_status" style="display:none; color: green;">Đã copy mã giảm giá!</p>
</div>';

$output .= '
<style>
.coupon-box {
margin: 24px auto; /* Canh giữa theo chiều dọc + ngang */
padding: 0 15px; /* Đệm 2 bên để không dính lề */
max-width: 400px; /* Giới hạn chiều rộng (tùy chỉnh nếu cần) */
width: 100%;
display: flex;
justify-content: center; /* CANH GIỮA 2 NÚT */
align-items: center;
gap: 18px; /* Khoảng cách giữa 2 phần: 18px > 15px */
flex-wrap: wrap;
font-size: 16.8px; /* 14px × 1.2 */
box-sizing: border-box;
}
.coupon-code-wrap {
display: flex;
align-items: center;
justify-content: flex-end; /* Mã nằm bên phải trong input */
}
.coupon-input-container {
position: relative;
width: 180px; /* 150px × 1.2 */
height: 48px; /* Đồng bộ chiều cao */
}
.coupon-box input {
padding: 12px; /* 10px × 1.2 */
border: 1px solid #ccc;
border-radius: 6px; /* 5px × 1.2 */
width: 100%;
height: 100%;
font-size: inherit;
text-align: right;
box-sizing: border-box;
margin: 0;
}
.coupon-box .copy-btn {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 78%; /* 65% × 1.2 */
height: 100%;
padding: 0;
background-color: #ff5733;
color: white;
border: none;
border-radius: 6px 0 0 6px;
cursor: pointer;
font-size: inherit;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease;
}
.coupon-box .copy-btn:hover {
background-color: #e64c2d;
}
.coupon-box .open-link {
padding: 0;
background-color: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: inherit;
min-height: 48px;
min-width: 135px;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
transition: background-color 0.2s ease;
}
.coupon-box .open-link:hover {
background-color: #0056b3;
}
.coupon-box p {
margin: 12px 0 0;
font-size: inherit;
width: 100%;
text-align: center; /* Thông báo cũng canh giữa */
}
</style>';

$output .= '
<script>
function copyCoupon(unique_id) {
var couponInput = document.getElementById(unique_id + "_code");
couponInput.select();
document.execCommand("copy");
var status = document.getElementById(unique_id + "_status");
status.style.display = "block";
setTimeout(function() {
status.style.display = "none";
}, 3000);
}
function openAffiliateLink(url) {
window.open(url, "_blank");
}
</script>';

return $output;
}
add_shortcode('coupon', 'coupon_shortcode');

[123coupon code="HOCBAN" url="https://my.azdigi.com/aff.php?aff=673&url=https://azdigi.com/ssd-hosting/"]