Untitled

<!DOCTYPE html>
<html lang="vi">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Xác nhận đơn hàng</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f5f5f5;
      }
      .container {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        background-color: white;
        padding: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }
      .header {
        background-color: #ff8c00;
        color: white;
        padding: 10px;
        text-align: center;
      }
      .content {
        margin: 20px 0;
      }
      .content h2 {
        color: #333;
      }
      .details {
        margin: 15px 0;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
      }
      .footer {
        text-align: center;
        margin-top: 20px;
        font-size: 14px;
        color: #777;
      }
      .total {
        font-weight: bold;
        color: red;
      }
      @media (max-width: 600px) {
        .container {
          padding: 10px;
        }
        .header,
        .footer {
          font-size: 16px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h1>Xác nhận đơn hàng</h1>
      </div>
      <div class="content">
        <p>Kính gửi quý khách Nguyễn Đăng Bắc,</p>
        <p>
          Đơn đặt vé của quý khách đã thanh toán thành công. Mã đơn đặt vé của
          quý khách là <strong>704</strong>. Cảm ơn quý khách đã tin tưởng sử
          dụng dịch vụ của chúng tôi.
        </p>
        <div class="details">
          <h2
            style="Margin:0;line-height:29px;font-family:arial,&#39;helvetica neue&#39;,helvetica,sans-serif;font-size:24px;font-style:normal;font-weight:normal;color:#fa8c16"
          >
            Chi tiết đặt vé
          </h2>
          <div
            style="display: flex; align-items: center; justify-content: center"
          >
            <div style="flex: 1">
              <p><strong>Mã đặt vé:</strong> 704</p>
              <p><strong>Ngày đặt vé:</strong> 19:45:44 03/09/2024</p>
              <p><strong>Trạng thái:</strong> Thành công</p>
            </div>
            <div style="flex: 1">
              <p><strong>Địa điểm:</strong> Vin Wonder Nha Trang</p>
              <p><strong>Ngày sử dụng:</strong> 25/09/2024</p>
            </div>
          </div>
          <div
            style="display: flex; align-items: center; justify-content: center"
          >
            <div style="flex: 1">
              <p><strong>Họ và tên:</strong> Nguyễn Đăng Bắc</p>
              <p><strong>Số điện thoại:</strong> 0982779735</p>
              <p><strong>Email:</strong> 9329 93972</p>
            </div>
            <div style="flex: 1">
              <p><strong>Ngày sinh:</strong> [Nhập ngày sinh]</p>
              <p><strong>Quốc tịch:</strong> Việt Nam</p>
              <p><strong>Số CMND/Passport:</strong> [Nhập số CMND/Passport]</p>
            </div>
          </div>

          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <p><strong>Gói bán x Số lượng</strong></p>

            <p><strong>Đơn giá (đ)</strong></p>
          </div>
          <hr style="line-height: 1.05rem; margin: 0; color: gray" />

          <!--  list_data.map()  loop để start render -->
          <div>
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: space-between;
              "
            >
              <p>
                <strong>Vui chơi Wonderlands - Khách không lưu trú x 1</strong>
              </p>
              <p><strong>380.000 đ</strong></p>
            </div>
            <hr style="line-height: 1.05rem; margin: 0; color: gray" />
          </div>
          <!-- end render -->

          <div
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div></div>
            <div>
              <p class="total" style="margin-bottom: 0">
                Tổng thanh toán: 380.000 đ
              </p>
              <p style="float: right; margin-top: 8px">
                (Đã bao gồm thuế GTGT)
              </p>
            </div>
          </div>
        </div>
        <p
          style="Margin:0;line-height:29px;font-family:arial,&#39;helvetica neue&#39;,helvetica,sans-serif;font-size:24px;font-style:normal;font-weight:normal;color:#fa8c16"
        >
          Vé online của quý khách tại <a href="#">đây</a>.
        </p>
      </div>
      <div class="footer">
        <p>Địa chỉ hỗ trợ: C.TY TNHH TM&DV AIRPORT CAR</p>
        <p>
          Số 45 Trần Trinh, Phường 9, Thành phố Đà Lạt, Tỉnh Lâm Đồng, Việt Nam.
        </p>
      </div>
    </div>
  </body>
</html>
Editor is loading...