Card hiển thị Pin chuyển động (fluid-level-background-card)

type: picture-elements
elements:
  - type: custom:fluid-level-background-card
    entity: sensor.soc_giao_tiep
    style:
      z-index: 1
      top: 50%
      left: 50%
      transform: translate(-50%, -50%)
      width: 100%
      height: 100%
    card_mod:
      style: |
        ha-card {
          text-align: center;
          --ha-card-border-color: transparent !important;
          box-shadow: none !important;
          background: none !important;
          border-radius: 50px;
          overflow: hidden;
        }  
        #container, .container {
          width: 23.3% !important;
          height: 70% !important;
          position: relative !important;
          border-radius: 15px !important;
          margin-left: 38.2%;
          margin-top: 8%;
          # transform: translate(150%, -50%);
          opacity: 0.6;
          overflow: hidden;
        }
    level_color:
      - 82
      - 171
      - 255
    severity:
      - color:
          - 255
          - 71
          - 71
        value: 0
      - color:
          - 112
          - 200
          - 255
        value: 20
      - color:
          - 26
          - 179
          - 255
        value: 50
      - color:
          - 0
          - 145
          - 255
        value: 80
    fill_entity: input_boolean.dang_sac
    full_value: "110"
    card:
      type: markdown
      content: |

        PIN

        <font size="+2">**{{ states('sensor.soc_giao_tiep') }}**%</font>
image: >-
  https://community-assets.home-assistant.io/original/4X/5/f/b/5fbcfaef479c8ebbf70ae790b9814ea0baa352f9.png
card_mod:
  style:
    hui-image $: |
      img {
        z-index: 1 !important;
        position: relative !important;
        right: 0px;
        top: 0px;
        width: 100% !important;
        opacity: 1
      }