.vietnamese {
  font-family: Arial;
}

.arrow-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;

  border: 2px solid #808080;
  border-right: none;
  background-color: transparent;

  box-sizing: border-box;
  border-radius: 0.25em 0 0 0.25em !important;

  /* ★変更点: 矢印だけでなく「点」も右に大きく飛び出すため、余白を増やします */
  margin-right: 5em !important;
  width: calc(100% - 6.5em); /* marginに合わせて全体の幅も微調整してください */
}

/* 矢印の「＞」の部分（変更なし） */
.arrow-box::after {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  right: 0;

  aspect-ratio: 1 / 1;
  transform: translateX(50%) scale(0.7071) rotate(45deg);

  border-top: 2.83px solid #808080;
  border-right: 2.83px solid #808080;
  box-sizing: border-box;
}

/* ★追加: 矢印の先の「赤い点」部分 */
.arrow-box::before {
  /* 画像に合わせた丸を指定 */
  content: "●●●●●";
  color: #808080; /* 画像に近い柔らかい赤色 */
  font-size: 8px; /* 点の大きさ */
  letter-spacing: 0.75em; /* 点と点の隙間 */
  white-space: nowrap;

  /* 配置の設定 */
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 100%; /* 親要素の右端をスタート地点にする */

  /* 1. 矢印と同じく高さを基準にした正方形を作る */
  aspect-ratio: 1 / 1;

  /* 2. 自身の幅の50%（＝矢印の飛び出し量と全く同じ値）だけ右に移動する */
  /* これにより、この要素の「左端」が、ピッタリ矢印の「先端」に合います */
  transform: translateX(50%);

  /* 3. テキストを上下中央に配置 */
  display: flex;
  align-items: center;

  /* 4. 矢印の先端と、最初の点の間の距離を調整 */
  padding-left: 0;
}