can not change background color using hover-CodePudding

I am trying to make 3 columns, each column has it own background color and it will change to another color when we hover to it.

I named the column by header__notify-item, and in my main.css I wrote a code like this :

.header__notify-item {
    display: flex;
}

.header__notify-item:hover {
    background-color: #dad0d0 !important;
}

.header__notify-link-viewed {
    background-color: #fff2ee;
}

The columns named header__notify-link-viewed are viewed columns. So they will have this color.

My problem is, the viewed columns do not change color when I hover to them. Only the unview column change color when I hover to it.

Maybe the reason is because I set the background color for the viewed columns? Because when I delete it, it works.

When I add this code to my code, it works but the code too long, and I do not want to do like this:

.header__notify-link-viewed:hover {
    background-color: #dad0d0 !important;
}

Maybe the cause is the conflict between header__notify-link-viewed and header__notify-item?

I really want to set the background color for the viewed columns by the short code.

Could you please give me some ideas for this problem ?

:root {
  --white-color: #fff;
  --black-color: #000;
  --text-color: #333;
}

* {
  box-sizing: inherit;
}

html {
  font-size: 100%;
  line-height: 1.6rem;
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
}

.grid {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
}

.grid__full-width {
  width: 100%;
}

.grid__row {
  display: flex;
  flex-wrap: wrap;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.header {
  height: 120px;
  background-image: linear-gradient(0, #fe6433, #f7482e);
}

.header__navbar {
  display: flex;
  justify-content: space-between;
}

.header__navbar-list {
  list-style: none;
  padding-left: 0;
  margin-top: 14px;
}

.header__navbar-item {
  margin: 0 8px;
  position: relative;
  min-height: 26px;
}

.header__navbar-item,
.header__navbar-item-link {
  display: inline-block;
  font-size: 1.3rem;
  color: var(--white-color);
  text-decoration: none;
  font-weight: 3;
}

.header__navbar-item,
.header__navbar-item-link,
.header__navbar-icon-link {
  display: inline-flex;
  align-items: center;
}

.header__navbar-item:hover,
.header__navbar-icon-link:hover,
.header__navbar-item-link:hover {
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

.header__navbar-item--bold {
  font-weight: 500;
}

.header__navbar-item--separate::after {
  content: "";
  display: block;
  position: absolute;
  border-left: 1px solid #ffffff;
  height: 16px;
  right: -9px;
  top: 50%;
  transform: translateY(-50%);
}

.header__navbar-icon-link {
  color: var(--white-color);
  text-decoration: none;
}

.header__navbar-icon {
  font-size: 1.8rem;
  margin: 0 4px;
}

.header__navbar-title--no-pointer {
  cursor: text;
  color: var(--white-color);
}

.header__qr {
  width: 190px;
  position: absolute;
  left: 0;
  top: 110%;
  padding: 8px;
  display: none;
  animation: fadeIn ease-in 1s;
}

.header__qr::before {
  position: absolute;
  left: 0;
  top: -16px;
  width: 100%;
  height: 20px;
  content: "";
  display: block;
}

.header__navbar-item--has-qr:hover .header__qr {
  display: block;
}

.header__qr-img {}

.header__qr-apps {
  display: flex;
  justify-content: space-between;
}

.header__qr-link:nth-child(1) {
  margin-left: 11px;
}

.header__qr-link:nth-child(2) {
  margin-left: 20px;
}

.header__qr-download-img {
  height: 18px;
}


/* header notifycation */

.header__notify {
  position: absolute;
  top: 100%;
  width: 404px;
  background-color: var(--white-color);
  right: 0;
  border: 1px solid #D3D3D3;
}

.header__notify-header {
  color: #999;
  margin: 0 0 0 12px;
  font-weight: 200;
  font-size: 0.8rem;
}

.header__notify-list {
  padding-left: 0;
}

.header__notify-item {
  display: flex;
}

.header__notify-item:hover {
  background-color: #dad0d0 !important;
}

.header__notify-link-viewed {
  background-color: #fff2ee;
}

.header__notify-link {
  display: flex;
  padding: 12px;
  text-decoration: none;
  width: 100%;
}

.header__notify-img {
  width: 48px;
  object-fit: contain;
}

.header__notify-info {
  margin-left: 12px;
}

.header__notify-name {
  display: block;
  color: rgba(0, 0, 0, 0.8);
  font-size: 0.875rem;
  margin-bottom: 0.3125rem;
}

.header__notify-des {
  display: block;
  color: rgba(0, 0, 0, 0.8);
  font-size: 0.75rem;
  line-height: 0.9375rem;
  margin-bottom: 0.3125rem;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">

<header >
  <div >
    <nav >
      <ul >
        <li >Kênh Người Bán</li>
        <li >Trở thành Người bán Shopee</li>
        <li >Tải ứng dụng
          <div >
            <img src="./assets/img/QRcode.png" alt="QR code" >
            <div >
              <a href="" >
                <img src="./assets/img/Googleplay.png" alt="Google play" >
              </a>
              <a href="" >
                <img src="./assets/img/apple store.png" alt="App store" >
              </a>


            </div>
          </div>



        </li>
        <li >
          <span >Kết nối</span>

          <a href="" >
            <i ></i>
          </a>
          <a href="" >
            <i ></i>
          </a>
        </li>
      </ul>

      <ul >
        <li >
          <a href="" >
            <i ></i> Thong bao
          </a>
          <div >
            <header >
              <h3>Thông báo mới nhận</h3>
            </header>
            <ul >
              <li >
                <a href=" " >
                  <img src="https://cf.shopee.vn/file/5c9ca4d8558235c6cc9798cdf7379bce_tn" alt="" >
                  <div >
                    <span ><b>Bạn thân yêu ơi!</b></span>
                    <span >Để giúp Shopee hiểu & có thể đề xuất các sản phẩm phù hợp nhất đến bạn, hãy chia sẻ với Shopee về các thói quen mua sắm của bạn TẠI ĐÂY nhé!</span>
                  </div>
                </a>
              </li>



              <li >
                <a href=" " >
                  <img src="https://cf.shopee.vn/file/5c9ca4d8558235c6cc9798cdf7379bce_tn" alt="" >
                  <div >
                    <span ><b>Bạn nói Shopee lắng nghe!</b></span>
                    <span >Bạn có thể vui lòng dành 3 phút để trả lời một khải sát nhỏ để giúp chúng tôi hiểu hơn về trải nghiệm mua sắm của bạn trong thời gian chiến dịch của Shopee diễn ra