 <!-- Select ActionSets, filter -->
  <div class="btn-group">
    <sp-picker id="actionSet-picker" placeholder="Select Action Set">
      <sp-menu slot="options"></sp-menu>
    </sp-picker>
    <sp-action-button class="sort-btn">
      <div slot="icon" class="icon-sort" style="fill:currentColor">
        <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
          <rect id="Canvas" fill="#ff13dc" opacity="0" width="18" height="18" />
          <rect class="fill" height="2" rx="0.5" width="6" x="1" y="12" />
          <rect class="fill" height="2" rx="0.5" width="8" x="1" y="8" />
          <rect class="fill" height="2" rx="0.5" width="10" x="1" y="4" />
          <path
            d="M16,12H14.9965V4.5a.494.494,0,0,0-.488-.5L14.503,4h-.496a.5.5,0,0,0-.5.5L13.5035,12H12.5a.25.25,0,0,0-.25.25.245.245,0,0,0,.0735.175l1.7685,2.0165a.25.25,0,0,0,.316,0l1.7685-2.0165a.245.245,0,0,0,.0735-.175A.25.25,0,0,0,16,12Z" />
        </svg>
      </div>
    </sp-action-button>
    <sp-action-button class="favourite-btn">
      <sp-icon name="ui:Star" size="m" slot="icon"></sp-icon>
    </sp-action-button>
  </div>
  <!-- search actions -->
  <sp-textfield id="search-actions" type="search" onfocus placeholder="Search Actions"
    style="width: 100%; padding-bottom: 5px;">
  </sp-textfield>
  <div class="color-btn">
    <sp-action-button class="red-btn" style="width: 17%;">
      <div slot="icon" class="icon-color" style="fill: #922a18;">
      </div>
    </sp-action-button>
    <sp-action-button class="orange-btn" style="width: 17%;">
      <div slot="icon" class="icon-color" style="fill: #925b13;">
      </div>
    </sp-action-button>
    <sp-action-button class="yellow-btn" style="width: 17%;">
      <div slot="icon" class="icon-color" style="fill: #a37e18;">
      </div>
    </sp-action-button>
    <sp-action-button class="green-btn" style="width: 17%;">
      <div slot="icon" class="icon-color" style="fill: #667520;">
      </div>
    </sp-action-button>
    <sp-action-button class="blue-btn" style="width: 17%;">
      <div slot="icon" class="icon-color" style="fill: #2d549b;">
      </div>
    </sp-action-button>
    <sp-action-button class="violet-btn" style="width: 17%;">
      <div slot="icon" class="icon-color" style="fill: #595099;">
      </div>
    </sp-action-button>
  </div>
  <!-- Danh sách actions của mỗi actionSet -->
  <div id="actions-list" class="hidden"></div>
  <div class="nologin" style="background:var(--ulliColor); padding: 16px; padding-bottom: 30px;">
    <div class="login" style="width: 100%;">
      <sp-textfield id="username" style="width: 100%;" type="username" placeholder="Enter UserName">
        <sp-label isrequired="true" slot="label">UserName:</sp-label>
      </sp-textfield>
      <sp-textfield id="password" style="width: 100%;" type="password" placeholder="Enter Pasword">
        <sp-label isrequired="true" slot="label">Pasword:</sp-label>
      </sp-textfield>
    </div>
    <div class="enter-login" style="width: 100%; margin-top: 10px; display: flex; justify-content: center;">
      <sp-action-button class="login-btn">
        <div slot="icon" class="icon-login" style="fill:currentColor">
          <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
            <rect id="Canvas" fill="#ff13dc" opacity="0" width="18" height="18" />
            <path
              d="M5.8,15.0885A3.95,3.95,0,0,1,9.7455,11.144a3.78664,3.78664,0,0,1,.9755.1275l.45-.45c0-.016-.0085-.031-.0085-.05V9.661a.77.77,0,0,1,.196-.4965A5.873,5.873,0,0,0,12.694,5.5c0-2.7735-1.4705-4.323-3.6935-4.323S5.2655,2.7875,5.2655,5.5a5.93651,5.93651,0,0,0,1.4,3.665.77.77,0,0,1,.196.4965v1.107a.764.764,0,0,1-.6665.771c-4.4655.3885-5.163,3.443-5.163,4.65,0,.134.0155.6605.0255.792h5.246A3.89259,3.89259,0,0,1,5.8,15.0885Z" />
            <path
              d="M17.8325,10.446l-1.971-1.971a.45751.45751,0,0,0-.647,0L11.018,12.6715a2.714,2.714,0,0,0-1.2735-.327A2.7445,2.7445,0,1,0,12.489,15.089a2.71592,2.71592,0,0,0-.32-1.2605l2.05-2.05,1.1405,1.1405a.2285.2285,0,0,0,.32315.00035L15.683,12.919l1.02-1.02-1.3-1.3.3755-.3755,1.3,1.3.753-.753a.2285.2285,0,0,0,.00235-.32314ZM9.45,16.3a.915.915,0,1,1,.915-.915A.915.915,0,0,1,9.45,16.3Z" />
          </svg>
        </div>
        Login
      </sp-action-button>
    </div>
  </div>
  <!-- Reset, account -->
  <div class="user-erea">
    <sp-action-button quiet class="refresh-btn">
      <div slot="icon" class="icon-refresh" style="fill:currentColor">
        <svg xmlns="http://www.w3.org/2000/svg" height="15" viewBox="0 0 18 18" width="15">
          <rect id="Canvas" fill="#ff13dc" opacity="0" width="18" height="18" />
          <path
            d="M16.337,10H15.39a.6075.6075,0,0,0-.581.469A5.7235,5.7235,0,0,1,5.25,13.006l-.346-.3465L6.8815,10.682A.392.392,0,0,0,7,10.4a.4.4,0,0,0-.377-.4H1.25a.25.25,0,0,0-.25.25v5.375A.4.4,0,0,0,1.4,16a.3905.3905,0,0,0,.28-.118l1.8085-1.8085.178.1785a8.09048,8.09048,0,0,0,3.642,2.1655,7.715,7.715,0,0,0,9.4379-5.47434q.04733-.178.0861-.35816A.5.5,0,0,0,16.337,10Z" />
          <path
            d="M16.6,2a.3905.3905,0,0,0-.28.118L14.5095,3.9265l-.178-.1765a8.09048,8.09048,0,0,0-3.642-2.1655A7.715,7.715,0,0,0,1.25269,7.06072q-.04677.17612-.08519.35428A.5.5,0,0,0,1.663,8H2.61a.6075.6075,0,0,0,.581-.469A5.7235,5.7235,0,0,1,12.75,4.994l.346.3465L11.1185,7.318A.392.392,0,0,0,11,7.6a.4.4,0,0,0,.377.4H16.75A.25.25,0,0,0,17,7.75V2.377A.4.4,0,0,0,16.6,2Z" />
        </svg>
      </div>
    </sp-action-button>
    <p class="version">1.0.1</p>
  </div>