<div style="background-color: white">
  <!-- Header section -->
  <section class="my-8 mx-md-8">
    <nav class="cgds" aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#"><i class="bi bi-house"></i>ទំព័រដើម</a></li>
        <li class="breadcrumb-item"><a href="#">បណ្ណាល័យ</a></li>
        <li class="breadcrumb-item active" aria-current="page">ទិន្នន័យ</li>
      </ol>
    </nav>
    <div class="mb-4 row">
      <div class="col-md-6 col-12">
        <h1>ចុះឈ្មោះ</h1>
        <p class="text-muted">
          អ្នកជាសមាជិកហើយឬនៅ?
          <a href="" class="text-decoration-none">ចូលគណនី</a>
        </p>
      </div>
      <div class="d-flex justify-content-end align-items-center col-md-6 col-12">
        <a href="" class="me-4 btn btn-outline-dark cgds">បោះបង់</a>
        <button type="button" class="btn btn-secondary cgds">
          រក្សាទុក​
        </button>
      </div>
    </div>
  </section>
  <!-- Content section -->
  <section class="shadow rounded p-5 my-8 mx-md-8">
    <form>
      <div class="col-sm-8">
        <div class="row">
          <div class="mb-3 col-md-6 col-12">
            <label class="form-label" for="formSinglePageInput1">ឈ្មោះ</label>
            <input
              placeholder="បញ្ចូល​អត្ថបទ​របស់​អ្នក​នៅ​ទីនេះ"
              type="text"
              id="formSinglePageInput1"
              class="form-control">
          </div>
          <div class="mb-3 col-md-6 col-12">
            <label class="form-label" for="formSinglePageInput2">អាសយដ្ឋាន</label>
            <input
              placeholder="បញ្ចូល​អត្ថបទ​របស់​អ្នក​នៅ​ទីនេះ"
              type="text"
              id="formSinglePageInput2"
              class="form-control">
          </div>
        </div>
        <div class="mb-3">
          <label class="form-label" for="formSinglePageInput3">អុីម៉ែល</label>
          <div class="mb-3 input-group cgds">
            <input
              placeholder="បញ្ចូល​អត្ថបទ​របស់​អ្នក​នៅ​ទីនេះ"
              aria-label="Dollar amount (with dot and two decimal places)"
              id="formSinglePageInput3"
              class="form-control">
            <span class="input-group-text">@something.com</span>
          </div>
        </div>
        <div class="mb-3">
          <label class="form-label" for="formSinglePageInput4">លេខទូរស័ព្ទ</label>
          <input
            placeholder="បញ្ចូល​អត្ថបទ​របស់​អ្នក​នៅ​ទីនេះ"
            type="text"
            id="formSinglePageInput4"
            class="form-control">
        </div>
        <div class="mb-3">
          <label class="form-label" for="formSinglePageSelect1">តួនាទី</label>
          <select class="form-select" id="formSinglePageSelect1">
            <option>មន្រ្តី</option>
            <option>មន្រ្តីកិច្ចសន្យា</option>
            <option>បុគ្គលិកហាត់ការ</option>
          </select>
        </div>
        <div class="mb-3" id="formSinglePageRadio1">
          <label class="form-label" for="formSinglePageRadio1">ភេទ</label>
          <div class="form-check">
            <input
              name="radioGroup1"
              type="radio"
              class="form-check-input">
            <label title="" for="formSinglePageRadio1" class="form-check-label">ស្រី</label>
          </div>
          <div class="form-check">
            <input
              name="radioGroup1"
              type="radio"
              class="form-check-input">
            <label
              title=""
              for="formSinglePageRadio1"
              class="form-check-label">
              ប្រុស
            </label>
          </div>
        </div>
        <div class="mb-3">
          <label class="form-label" for="formSinglePageInput5">មតិបន្ថែមរបស់អ្នក</label>
          <textarea
            rows="5"
            placeholder="បញ្ចូល​អត្ថបទ​របស់​អ្នក​នៅ​ទីនេះ"
            type="text"
            id="formSinglePageInput5"
            class="form-control">
                    </textarea>
        </div>
        <div class="mb-3">
          <div class="form-check">
            <input
              type="checkbox"
              id="formBasicCheckbox1"
              class="form-check-input"
            >
            <label title="" for="formBasicCheckbox1" class="form-check-label">
              ខ្ញុំយល់ព្រមនឹងលក្ខខណ្ឌនៃកិច្ចព្រមព្រៀងអតិថិជននិងគោលការណ៍ឯកជនភាព
            </label>
          </div>
        </div>
      </div>
    </form>
  </section>
  <div class="d-flex justify-content-end my-8 mx-md-8">
    <button type="submit" class="btn btn-primary cgds">ដាក់ស្នើ</button>
  </div>

  <!-- Footer section -->
  <footer class="cgds footer">
    <section class="footer-top">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="widget flex-column">
              <div class="logo">
                <img src="/assets/uncompressed_images/rachana.svg" style="width: 200px"
                     alt="dgc logo">
              </div>
              <div class="social-icon">
                <ul>
                  <li>
                    <a href="">
                      <img src="/assets/uncompressed_images/icon/Facebook.svg"
                           alt="facebook-icon">
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <img src="/assets/uncompressed_images/icon/YouTube.svg" alt="youtube-icon">
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <img src="/assets/uncompressed_images/icon/Telegram.svg"
                           alt="telegram-icon">
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <img src="/assets/uncompressed_images/icon/Tiktok.svg" alt="tiktok-icon">
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <img src="/assets/uncompressed_images/icon/Linkin.svg" alt="linkin-icon">
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="title">
              ជួរទី១
            </div>
            <ul class="links">
              <li><a href="">អំពីយើង</a></li>
              <li><a href="">អក្សរនេះសម្រាប់មើលតេស្ត</a></li>
              <li><a href="">តេស្ត</a></li>
              <li><a href="">តេស្ត</a></li>
            </ul>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="title">
              ជួរទី២
            </div>
            <ul class="links">
              <li><a href="">អំពីយើង</a></li>
              <li><a href="">អក្សរនេះសម្រាប់មើលតេស្ត</a></li>
              <li><a href="">តេស្ត</a></li>
              <li><a href="">តេស្ត</a></li>
            </ul>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="title">
              ជួរទី៣
            </div>
            <ul class="links">
              <li><a href="">អំពីយើង</a></li>
              <li><a href="">អក្សរនេះសម្រាប់មើលតេស្ត</a></li>
              <li><a href="">តេស្ត</a></li>
              <li><a href="">តេស្ត</a></li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <section class="footer-bottom">
      <div class="container-fluid">
        <div class="row footer-copyrights">
          <div class="col">
            <div class="d-flex justify-content-lg-start text-start">
              DGC © 2023 ~ រក្សាសិទ្ធិដោយគណៈកម្មាធិការរដ្ឋាភិបាលឌីជីថល
            </div>
          </div>
          <div class="col">
            <dev class="d-flex justify-content-lg-end text-end">
              <ul>
                <li><a href="" target="_blank" rel="noopener noreferrer">រាយការណ៍ពីភាពខ្វះខាត</a></li>
                <li><a href="">ឯកជនភាព</a></li>
                <li><a href="">លក្ខខណ្ឌនៃប្រើប្រាស់</a></li>
              </ul>
            </dev>
          </div>
        </div>
      </div>
    </section>
  </footer>